importNode函数中的deep参数是否有一个特殊的上下文?

Question

我昨天第一次接触到importNode函数，我不理解深度参数。Mozilla文档说:

布尔标志，默认值为false，用于控制是否在导入中包含externalNode的整个DOM子树。如果deep设置为true，则externalNode及其所有后代被复制。如果deep设置为false，则只有externalNode已导入-新节点没有子节点。

https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode?retiredLocale=de

如果我尝试将deep参数设置为true，它会工作，整个父元素被复制。但如果我将deep参数设为false，什么都不会发生。这一刻我意识到我还没有真正理解这里的文档。为什么我需要深=假?

const btn1 = document.querySelector(".deep-true");
const btn2 = document.querySelector(".deep-false");
btn1.addEventListener("click", appendElement_1.bind())
btn2.addEventListener("click", appendElement_2.bind())
function appendElement_1() {
const parent = document.querySelector("div .parent");
const node = document.importNode(parent, true);
document.body.appendChild(node);
}
function appendElement_2() {
const parent = document.querySelector("div .parent");
const node = document.importNode(parent, false);
document.body.appendChild(node);
}

span {
color: green;
}
.parent {
background: green;
height:20px;
border: 1px solid red;
}

<div id="app">

<div class="parent">
<div class="child">
<p>hello <span>World</span></p>
<h1>Bye</h1>      
</div>
</div>
<button class="deep-true">ImportNode (deep: true)</button>
<button class="deep-false">ImportNode (deep: false)</button>
</div>

Answer 1

只是为了说明deep参数以及如何使用所选节点，对原始代码进行了稍微修改，只需将outerHTML添加到textarea中，以便可以清楚地看到正在发生的事情。

const d=document;
const evthandler=(e)=>{
d.querySelector('textarea').innerHTML=d.importNode( d.querySelector("div#app .parent"), parseInt( e.target.dataset.deep ) ).outerHTML
}
d.querySelector(".deep-true").addEventListener("click", evthandler )
d.querySelector(".deep-false").addEventListener("click", evthandler )

span {
color: green;
}

<div id="app">
<div class="parent">PARENT
<div class="child">CHILD
<p>hello <span>World</span></p>
<h1>Bye</h1>      
</div>
</div>
<button data-deep=1 class="deep-true">ImportNode (deep: true)</button>
<button data-deep=0 class="deep-false">ImportNode (deep: false)</button>
</div>
<textarea cols=50 rows=6></textarea>