使用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>
现在,您正在将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框架之一,则顺序并不重要。例如,您可以告诉JQuery等待使用$(document).ready加载内容,Angular允许您使用promise来编写代码。将JS遍布到一个文件中并不是一个好习惯,但将它放入浏览器加载的文件中意味着您必须等待。就我个人而言,我认为在这里和那里特别是当你在开发时,JS的奇怪的一点是没什么大不了的。 – Ghoti 2013-06-18 15:23:00
非常感谢您指出#1! – LinusGeffarth 2017-07-30 17:17:54