Question

这是我的占位符div ..

<div id="placeholderDiv">
</div>

这是我的另一个div，我必须从中获取所有元素

<div id="targetel">
   <div id="targetelInner">
     <a href="">one</a>
     <a href="">two</a>
     <a href="">three</a>
   </div>
</div>

现在我需要获取id =＆＃34; targetel＆＃34;内的所有元素。并希望插入id =＆＃34; placeholderDiv＆＃34;。我的最终输出应该是

 <div id="placeholderDiv">
     <div id="targetelInner">
        <a href="">one</a>
        <a href="">two</a>
        <a href="">three</a>
      </div>
 </div>.

如何使用js编码？我在html文档中编写html代码..而不是作为js文件..

Answer 1

将targetel的innerHTML添加到placeholderDiv

document.getElementById( "placeholderDiv" ).innerHTML = document.getElementById( "targetel" ).innerHTML;

如果您希望在页面的onload事件中发生这种情况，请将其添加到您的HTML页面

<script>
    window.load = function(){
        document.getElementById( "placeholderDiv" ).innerHTML = document.getElementById( "targetel" ).innerHTML;
    }
</script>

并通过

删除targetstel内的项目

document.getElementById( "targetel" ).innerHTML = "";

Answer 2

有很多方法可以实现这一目标。其中之一，也许最干净的是首先得到你的元素。

var element= document.getElementById('targetelInner');

然后创建它的克隆。请注意，在cloneNode中指定true将使其成为深度克隆，从而也克隆它的孩子。

var elClone= element.cloneNode(true);

之后你只需追加新的克隆div。

document.getElementById('placeholderDiv').appendChild(elClone);

请注意，append child会将此节点添加为占位符的最后一个子节点，而不会删除它已有的任何内容。

Answer 3

这将保留targetel中元素的状态，而不是复制HTML标记，它会转移实际节点对象的所有权。 事件监听器和其他数据将保留在传输的元素上。

var placeholder = document.getElementById('placeholderDiv');
var targetel = document.getElementById('targetel');
var frag = document.createDocumentFragment();

while (targetel.firstChild) {
  frag.appendChild(targetel.removeChild(targetel.firstChild));
}

placeholder.appendChild(frag);

使用纯js将包含子项和大子项的整个元素附加到另一个元素

3 个答案: