使用JavaScript获取DIV的内容

问题描述：

我有两个名为DIV1和DIV2的DIV，DIV1由动态内容组成，DIV2是空的。我需要在DIV2中显示DIV1的内容。我该怎么做。使用JavaScript获取DIV的内容

我用下面的方式编码，这是行不通的。有人请纠正它。

<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）您<script>标签前应放置关闭</body>标记。您的JavaScript试图操纵尚未加载到DOM中的HTML元素。
（2）您的HTML内容分配看起来很混乱。
（3）与所在元素ID的情况一致，即 'DIV2' VS 'Div2的'
（4）用户下为 '文档' 对象的情况下（来源：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框架之一，则顺序并不重要。例如，您可以告诉JQuery等待使用$（document）.ready加载内容，Angular允许您使用promise来编写代码。将JS遍布到一个文件中并不是一个好习惯，但将它放入浏览器加载的文件中意味着您必须等待。就我个人而言，我认为在这里和那里特别是当你在开发时，JS的奇怪的一点是没什么大不了的。 – Ghoti 2013-06-18 15:23:00

非常感谢您指出＃1！ – LinusGeffarth 2017-07-30 17:17:54

答

现在，您正在将innerHTML设置为整个div元素;你想把它设置为innerHTML。另外，我认为你想要MyDiv2.innerHTML = MyDiv .innerHTML。另外，我认为document.getElementById的说法是区分大小写的。你路过Div2当你想要DIV2

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

此外，该代码将运行在你的DOM已准备就绪。您可以把这个脚本在你的身体的底部像paislee说，还是把它放在你身体的onload功能

<body onload="loadFunction()">

然后

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

答

您需要将Div2设置为Div1的innerHTML。此外，JavaScript区分大小写 - 在您的HTML中，编号为Div2的是DIV2。此外，你应该使用document，不Document：

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

这里是一个的jsfiddle：http://jsfiddle.net/gFN6r/。

答

只需你使用jquery插件来获取/设置div的内容。

var divContent = $（'＃'DIV1）.html（）; $（'＃'DIV2）.html（divContent）;

为此，您需要包含jquery库。

这个问题不是关于jquery的。 – 2015-02-28 16:36:34

答

功能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; 

}

使用JavaScript获取DIV的内容

相关推荐