javascript - 克隆节点只有一级

Question

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

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

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

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

是否可以根据深度级别或其属性删除/添加克隆或不克隆的子级（克隆具有或不具有指定属性的唯一子级的父级）？

如果我会有更多深度级别的东西，我会基于属性，而不是使用递归的 parentNode.parentNode。

Answer 1

只需尝试删除innerHTML第一个children

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>