javascript - 克隆节点真正只有一级

Question

我想克隆一个只有 1 级子节点的节点，因此没有子节点的子节点。

<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 没有子级。

可以根据深度级别或其属性删除/添加克隆或不克隆的子级(仅克隆具有或不具有指定属性的子级的父级)？

如果我有更深度级别的东西，我会根据属性进行判断，而不是使用递归的parentNode.parentNode。

Answer 1

尝试删除第一个子级的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>