插入DOM神器 - insertAdjacent*

DOM操作中，插入元素的操作是使用較多的，一半我們都會使用appendChild來做，但是使用起來很不方便，特別是涉及到表格操作：

const emptyRow = document.querySelector('tr');

const firstCol = document.createElement('td');
firstCol.className = 'first-col';
firstCol.textContent = 'first col';
emptyRow.appendChild(firstCol);

const secondCol = document.createElement('td');
secondCol.className = 'second-col';
secondCol.textContent = 'second col';
emptyRow.appendChild(secondCol);
// ...

當然上面只是一個例子，以前使用jQuery也能夠極大的簡化上述工作，而且現在的主流框架也爲我們規避了大量的DOM操作。但實際上使用原生的DOM API也能夠做到：

insertAdjacentHTML

insertAdjacentHTML能夠解析字符串成爲Element，並將其插入DOM樹的特定位置（由position指定）。

我們可以使用insertAdjacentHTML來重寫上面的例子：

const emptyRow = document.querySelector('tr');

emptyRow.insertAdjacentHTML('beforeend', `
  <td class="first-col">first col</td>
  <td class="second-col">second col</td>
`);

語法

element.insertAdjacentHTML(position, text);

position的取值和解釋

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

更多信息查看MDN。

可以看到，insertAdjacentHTML不僅能夠實現插入元素的功能，還能夠靈活控制相對於調用元素的插入位置。

insertAdjacentElement

上文提到insertAdjacentHTML會先對傳入的字符串進行解析轉換爲Element再進行插入，而其胞弟insertAdjacentElement相當於省略瞭解析轉換的步驟，因爲其直接操作的對象就是Element：

targetElement.insertAdjacentElement(position, element);

其postion參數及含義和insertAdjacentHTML一樣：

const emptyRow = document.querySelector('tr');

const firstCol = document.createElement('td');
firstCol.className = 'first-col';
firstCol.textContent = 'first col';
emptyRow.insertAdjacentElement('beforeend', firstCol);

當然了，如果是像上面一樣需要先創建Element再進行插入操作，比appendChild還不方便，只是勝在能夠控制插入位置而已。但當其處理已存在的Element時有其獨到之處：處理已存在Element時，是移動的過程，並非是複製後插入的過程：

<div>
    <a id="baidu" href="https://baidu.com">百度</a>
</div>
<div>
    <a id="netease" href="https://163.com">網易</a>
</div>

如果我們想要將“網易”的鏈接移動到“百度”鏈接後面，可以這樣做：

const neteaseHref = document.getElementById('netease');
const baiduHref = document.getElementById('baidu');
baiduHref.insertAdjacentElement('afterend', neteaseHref);

處理完成後，DOM樹將變成：

<div>
    <a id="baidu" href="https://baidu.com">百度</a>
    <a id="netease" href="https://163.com">網易</a>
</div>
<div>
</div>

insertAdjacentText

insertAdjacent*家族還有個專門用來插入文本的的成員：insertAdjacentText，其API和insertAdjacentHTML類似：

element.insertAdjacentHTML(position, text);

但它不會像insertAdjacentHTML那樣對傳入的text進行解析，即使傳入的是DOM標籤也只會作爲文本渲染：

<div>
    <a id="netease" href="https://163.com">網易</a>
</div>

const neteaseHref = document.getElementById('netease');
neteaseHref.insertAdjacentText('beforebegin', '<span class="highlight">163</span>');

處理完成後DOM樹會變爲：

<div>
  "<span class="highlight">163</span>"
  <a id="netease" href="https://163.com">網易</a>
</div>

注意，渲染出來的是文本，而不是一個span元素。

總結

使用insertAdjacent*能夠方便地進行插入、移動、修改textContent等DOM操作，特別是能夠指定操作的相對位置能夠避免大量的查找工作。

指定插入位置時要注意，beforebegin和afterend兩個選項，只有當操作元素擁有父級元素時才能正常工作。