TA貢獻1836條經(jīng)驗 獲得超3個贊
片段允許您創(chuàng)建在當前時間點沒有父節(jié)點的兄弟元素。
正如您在本示例中所看到的，我們創(chuàng)建了兩個跨度并使用片段將它們添加到已創(chuàng)建的div中，因此跨度是直接子節(jié)點。
const main = document.getElementById('main')
let frag = document.createDocumentFragment()
let span1 = document.createElement('span')
span1.textContent = 'hello'
frag.appendChild(span1)
let span2 = document.createElement('span')
span2.textContent = 'world'
frag.appendChild(span2)
main.appendChild(frag)
<div id="main">
</div>
這導(dǎo)致以下結(jié)果：
<div id="main">
<span>hello</span><span>world</span>
</div>
現(xiàn)在，如果我們創(chuàng)建一個父元素并執(zhí)行相同的操作，它們就不再是主div的直接子元素。
const main = document.getElementById('main')
let div = document.createElement('div')
let span1 = document.createElement('span')
span1.textContent = 'hello'
div.appendChild(span1)
let span2 = document.createElement('span')
span2.textContent = 'world'
div.appendChild(span2)
main.appendChild(div)
<div id="main">
</div>
使用父母時，你得到這樣的輸出，因為你可以看到你現(xiàn)在有一個額外的div：
<div id="main">
<div>
<span>hello</span><span>world</span>
</div>
</div>
舉報