上一篇使用textContent修改文字，也透過classList.add()改變元素的樣式。這次繼續操作 DOM，看看如何用 JavaScript建立新的 HTML 元素，再把它放進網頁。

為了比較操作後的差別，先準備幾組相同的清單：

<ul id="original-list">
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ul id="append-list">
  <li>HTML</li>
  <li>CSS</li>
</ul>

第一組會保留原本的內容，第二組則用來測試append()。首先使用createElement()建立一個新的li：

const appendList = document.querySelector("#append-list");
const appendItem = document.createElement("li");

appendItem.textContent = "JavaScript";

這時候新的li已經建立，但還不會出現在畫面上，因為它還沒有放入網頁。接著使用append()把它加入清單：

appendList.append(appendItem);
可以看到「JavaScript」出現在第二組清單的最後面。append()會把新元素放在指定元素內部的尾端，所以它會排在 HTML 和 CSS 後面。

如果想把新元素放在最前面，可以改用prepend()：

const prependList = document.querySelector("#prepend-list");
const prependItem = document.createElement("li");

prependItem.textContent = "網頁基礎";
prependList.prepend(prependItem);

這次「網頁基礎」會出現在清單開頭。append()和prepend()都是把元素放進指定容器，差別只在加入的位置。

已經存在的元素也可以使用remove()刪除。先在清單中替要刪除的項目加上 class：

<ul id="remove-list">
  <li>HTML</li>
  <li class="remove-target">暫時項目</li>
  <li>CSS</li>
</ul>

接著選取這個項目並刪除：

const removeTarget = document.querySelector(".remove-target");
removeTarget.remove();

執行後，「暫時項目」就會從畫面中消失。這些操作改變的是瀏覽器目前的 DOM，重新整理頁面後，瀏覽器仍會重新讀取原本的 HTML。