使用 JavaScript 获取 DIV 的内容

IT技术 javascript
2021-02-07 18:06:07

我有两个名为 DIV1 和 DIV2 的 DIV,DIV1 由动态内容组成,而 DIV2 是空的。我需要在 DIV2 中显示 DIV1 的内容。我该怎么做。

我以下面的方式编码,这是行不通的。任何人请纠正它。

<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>
5个回答

(1) 你的<script>标签应该放在结束</body>标签之前您的 JavaScript 正在尝试操作尚未加载到 DOM 中的 HTML 元素。
(2) 您对 HTML 内容的分配看起来很混乱。
(3) 与元素 ID 中的大小写一致,即 'DIV2' 与 'Div2'
(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>
如果您使用的是 JavaScript 框架之一,那么顺序无关紧要。例如,您可以使用 $(document).ready 告诉 JQuery 等待内容加载完毕,Angular 允许您使用 Promise 编写代码。将 JS 散布在整个文件中并不是一个好习惯,但将其放入浏览器加载的文件中意味着您必须等待。就我个人而言,我认为这里和那里的 JS 的奇怪部分,特别是当你正在开发时,没什么大不了的。
2021-04-03 18:06:07

您需要将 Div2 设置为 Div1 的 innerHTML。此外,JavaScript 区分大小写 - 在您的 HTML 中,idDiv2DIV2. 此外,您应该使用document,而不是Document

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

这是一个 JSFiddle:http : //jsfiddle.net/gFN6r/

现在,您正在将 innerHTML 设置为整个 div 元素;您想将其设置为仅innerHTML。另外,我认为您想要 MyDiv2.innerHTML = MyDiv 1 .innerHTML。另外,我认为 to 的论点document.getElementById区分大小写。Div2在你想要的时候路过DIV2

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

此外,此代码将在您的 DOM 准备好之前运行。你可以像 paislee 说的那样把这个脚本放在你的 body 底部,或者把它放在你 body 的 onload 函数中

<body onload="loadFunction()">

接着

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

简单地你可以使用 jquery 插件来获取/设置 div 的内容。

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

为此,您需要包含 jquery 库。

问题不是关于 jquery。
2021-04-03 18:06:07

函数 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;

}