简体   繁体   English

"使用 JavaScript 获取 DIV 的内容"

[英]Get content of a DIV using JavaScript

I have two DIV's called DIV1 and DIV2 and DIV1 consists of dynamic content and DIV2 is empty.我有两个名为 DIV1 和 DIV2 的 DIV,DIV1 由动态内容组成,而 DIV2 为空。 I need content of DIV1 to be displayed in DIV2.我需要将 DIV1 的内容显示在 DIV2 中。 How can I do it.我该怎么做。

I coded in below manner which is not working.我以以下方式编码,这是行不通的。 Anybody please correct it.任何人请纠正它。

<script type="text/javascript">

   var MyDiv1 = Document.getElementById('DIV1');
   var MyDiv2 = Document.getElementById('Div2');
   MyDiv2.innerHTML = MyDiv2; 

</script>
<body>
<div id="DIV1">
 // Some content goes here.
</div>

<div id="DIV2">
</div>
</body>

(1) Your <script> tag should be placed before the closing </body> tag. (1) 您的<script>标签应该放在结束的</body>标签之前。 Your JavaScript is trying to manipulate HTML elements that haven't been loaded into the DOM yet.您的 JavaScript 正在尝试操作尚未加载到 DOM 中的 HTML 元素。
(2) Your assignment of HTML content looks jumbled. (2) 您对 HTML 内容的分配看起来很混乱。
(3) Be consistent with the case in your element ID, ie 'DIV2' vs 'Div2' (3) 与您的元素 ID 中的大小写一致,即 'DIV2' vs 'Div2'
(4) User lower case for 'document' object (credit: ThatOtherPerson) (4) 'document' 对象的用户小写字母(来源:ThatOtherPerson)

<body>
<div id="DIV1">
 // Some content goes here.
</div>

<div id="DIV2">
</div>
<script type="text/javascript">

   var MyDiv1 = document.getElementById('DIV1');
   var MyDiv2 = document.getElementById('DIV2');
   MyDiv2.innerHTML = MyDiv1.innerHTML;

</script>
</body>

You need to set Div2 to Div1's innerHTML.您需要将 Div2 设置为 Div1 的 innerHTML。 Also, JavaScript is case sensitive - in your HTML, the id Div2<\/code> is DIV2<\/code> .此外,JavaScript 区分大小写 - 在您的 HTML 中,id Div2<\/code>是DIV2<\/code> 。 Also, you should use document<\/code> , not Document<\/code> :此外,您应该使用document<\/code> ,而不是Document<\/code> :

var MyDiv1 = document.getElementById('DIV1');
var MyDiv2 = document.getElementById('DIV2');
MyDiv2.innerHTML = MyDiv1.innerHTML; 

Right now you're setting the innerHTML to an entire div element;现在,您正在将 innerHTML 设置为整个 div 元素; you want to set it to just the innerHTML.您想将其设置为仅 innerHTML。 Also, I think you want MyDiv2.innerHTML = MyDiv 1 .innerHTML.另外,我认为您想要 MyDiv2.innerHTML = MyDiv 1 .innerHTML。 Also, I think the argument to document.getElementById is case sensitive.另外,我认为document.getElementById的参数是区分大小写的。 You were passing Div2 when you wanted DIV2当您想要DIV2时,您正在通过Div2

var MyDiv1 = Document.getElementById('DIV1');
var MyDiv2 = Document.getElementById('DIV2');
MyDiv2.innerHTML = MyDiv1.innerHTML; 

Also, this code will run before your DOM is ready.此外,此代码将在您的 DOM 准备好之前运行。 You can either put this script at the bottom of your body like paislee said, or put it in your body's onload function你可以像 paislee 说的那样把这个脚本放在你身体的底部,或者把它放在你身体的 onload 函数中

<body onload="loadFunction()">

and then接着

function loadFunction(){
    var MyDiv1 = Document.getElementById('DIV1');
    var MyDiv2 = Document.getElementById('DIV2');
    MyDiv2.innerHTML = MyDiv1.innerHTML; 
}

function add_more() {功能添加更多(){

var text_count = document.getElementById('text_count').value;
var div_cmp = document.getElementById('div_cmp');
var values = div_cmp.innnerHTML;
var count = parseInt(text_count);
divContent = '';

for (i = 1; i <= count; i++) {

    var cmp_text = document.getElementById('cmp_name_' + i).value;
    var cmp_textarea = document.getElementById('cmp_remark_' + i).value;
    divContent += '<div id="div_cmp_' + i + '">' +
        '<input type="text" align="top" name="cmp_name[]" id="cmp_name_' + i + '" value="' + cmp_text + '" >' +
        '<textarea rows="1" cols="20" name="cmp_remark[]" id="cmp_remark_' + i + '">' + cmp_textarea + '</textarea>' +
        '</div>';
}

var newCount = count + 1;

if (document.getElementById('div_cmp_' + newCount) == null) {
    var newText = '<div id="div_cmp_' + newCount + '">' +
        '<input type="text" align="top" name="cmp_name[]" id="cmp_name_' + newCount + '" value="" >' +
        '<textarea rows="1" cols="20" name="cmp_remark[]" id="cmp_remark_' + newCount + '"  ></textarea>' +
        '</div>';
    //content = div_cmp.innerHTML;
    div_cmp.innerHTML = divContent + newText;
} else {
    document.getElementById('div_cmp_' + newCount).innerHTML = '<input type="text" align="top" name="cmp_name[]" id="cmp_name_' + newCount + '" value="" >' +
        '<textarea rows="1" cols="20" name="cmp_remark[]" id="cmp_remark_' + newCount + '"  ></textarea>';
}

document.getElementById('text_count').value = newCount;

}

simply you can use jquery plugin to get\/set the content of the div.只需您可以使用 jquery 插件来获取\/设置 div 的内容。

var divContent = $('#'DIV1).html(); var divContent = $('#'DIV1).html(); $('#'DIV2).html(divContent ); $('#'DIV2).html(divContent);

<\/blockquote>

for this you need to include jquery library.为此,您需要包含 jquery 库。

"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM