Clone Node true 只有一级

Question

我想克隆一个只有 children 级别 1 的节点，所以没有 children 级别 children。

<div data-a>
 <div> data-a1>
  <div data-a11>
   <p> fdsafdsafds</p>
  </div>
 </div>
</div>

如果我有最后一关作为目标

target.parentNode.parentNode.cloneNode(true) 将克隆所有级别，我希望克隆 data-a 包括 data-a1 但 data-a1 没有 children.

有可能 remove/add children 克隆与否，基于深度级别或它们的属性（克隆 parent 只有 children 有或没有指定的属性）？

如果我想要更深层次的东西，我会基于属性，而不是 parentNode.parentNode 使用递归。

Answer 1

只需尝试删除第一个 children

的 innerHTML

var dupeNode = target.parentNode.parentNode.cloneNode(true);
dupeNode.children[0].innerHTML = "";

演示

var target = document.querySelector( "p" );
var dupeNode = target.parentNode.parentNode.parentNode.cloneNode(true);
dupeNode.children[0].innerHTML = "";
//console.log(dupeNode.outerHTML);
document.querySelector( "#container" ).appendChild( dupeNode );

<div id="container">
  <div data-a=""> data-a level text to be cloned
    <div data-a1="">
      <div data-a11="">
        <p> fdsafdsafds</p>
      </div>
    </div>
  </div>
</div>

Clone Node true 只有一级

Clone Node true only one level

javascript

dom

clonenode