appendChild()
var childNode = parentNode.appendChild(childNode);
該方法的引數是一個Node物件,回傳值依然是該Node物件（引數中的childNode和回傳值childNode指向同一個Node物件）
html代碼
<div id="container1">
<h1>標題1</h1>
<p>段落1</p>
</div>
js代碼
let container1 = document.getElementById('container1');
let p2 = document.createElement('p');
p2.textContent = '段落2';
let p22 = container1.appendChild(p2)
顯示結果
如果想要將頁面中原有的節點插入到另外一個地方，節點會先從原位置移除，然后再插入到新位置，如果想要在原位置保留該節點，則需要先進行cloneNode，創建待插入節點的副本，然后再進行插入操作，
html代碼
<div id="container1">
<h1>標題1</h1>
<p>段落1</p>
</div>
<div id="container2"></div>
js代碼
let p1 = document.querySelector('p');
let p11 = p1.cloneNode(true); // //cloneNode引數設定成true，表示連同子節點一起克隆，如果設定成false,則只有p元素會被克隆
let container2 = document.getElementById('container2');
p11 = container2.appendChild(p11)
console.log(p1 === p11) //false
顯示結果
ParentNode.append 方法
ParentNode.append 方法在 ParentNode的最后一個子節點之后插入一組 Node 物件或 DOMString 物件，
被插入的 DOMString 物件等價為 Text 節點，
與 Node.appendChild() 的差異：
（1）ParentNode.append()允許追加 DOMString 物件，而 Node.appendChild() 只接受 Node 物件，
let container2 = document.querySelector('#container2')
container2.append('text') //成功在容器container2中插入textContent為‘text’的文本節點
let text1 = container2.appendChild('text') //報錯
（2）ParentNode.append() 沒有回傳值，而 Node.appendChild() 回傳追加的 Node 物件，
let container2 = document.querySelector('#container2')
let r = container2.append('text') //成功在容器container2中插入textContent為‘text’的文本節點
console.log(r);
let p = document.createElement('p');
p.textContent = 'ppp';
let r1 = container2.appendChild(p);
console.log(p);
（3）ParentNode.append() 可以追加多個節點和字串，而 Node.appendChild() 只能追加一個節點，
container2.append(p11, 'haha')
let haha1 = container2.appendChild(p11, 'haha') //只會添加p11,字串’haha‘被忽略
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/202448.html
標籤：JavaScript