JavaScript DOM 操作
在本教程中，你將學習如何在 JavaScript 中操作元素。
JavaScript 中操作 DOM 元素
現在你已經學會了如何選擇和設定 HTML DOM 元素的樣式。在本章中，我們將學習如何動態新增或刪除 DOM 元素，獲取其內容等。
向 DOM 新增新元素
你可以使用 document.createElement() 方法在 HTML 文件中顯式建立新元素。此方法建立一個新元素，但不會將其新增到 DOM; 你必須在單獨的步驟中執行此操作，如以下示例所示：
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Creating a new div element
var newDiv = document.createElement("div");
// Creating a text node
var newContent = document.createTextNode("Hi, how are you doing?");
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
var currentDiv = document.getElementById("main");
document.body.appendChild(newDiv, currentDiv);
</script>
appendChild() 方法在指定父節點的任何其他子節點的末尾新增新元素。但是，如果要在任何其他子項的開頭新增新元素，可以使用 insertBefore() 方法，如下例所示：
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Creating a new div element
var newDiv = document.createElement("div");
// Creating a text node
var newContent = document.createTextNode("Hi, how are you doing?");
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
var currentDiv = document.getElementById("main");
document.body.insertBefore(newDiv, currentDiv);
</script>
獲取或設定 HTML 內容到 DOM
你還可以使用 innerHTML 屬性輕鬆獲取或設定 HTML 元素的內容。此屬性設定或獲取元素中包含的 HTML 標記，即其開始和結束標記之間的內容。檢視以下示例以檢視其工作原理：
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Getting inner HTML conents
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
// Setting inner HTML contents
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
</script>
你可以看到使用 innerHTML 屬性可以輕鬆地將新元素插入到 DOM 中，但是存在一個問題，該 innerHTML 屬性將替換元素的所有現有內容。因此，如果要將 HTML 插入到文件中而不替換元素的現有內容，則可以使用 insertAdjacentHTML() 方法。
此方法接受兩個引數：要插入的位置和要插入的 HTML 文字。該位置必須是下列值之一： beforebegin ， afterbegin ， beforeend ，和 afterend 。所有主流瀏覽器都支援此方法。
以下示例顯示了位置名稱的視覺化及其工作原理。
<!-- beforebegin -->
<div id="main">
<!-- afterbegin -->
<h1 id="title">Hello World!</h1>
<!-- beforeend -->
</div>
<!-- afterend -->
<script>
// Selecting target element
var mainDiv = document.getElementById("main");
// Inserting HTML just before the element itself, as a previous sibling
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
// Inserting HTML just inside the element, before its first child
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
// Inserting HTML just inside the element, after its last child
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
// Inserting HTML just after the element itself, as a next sibling
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>
注意： 僅當節點位於 DOM 樹中並且具有父元素時， beforebegin 和 afterend 位置才有效。此外，在將 HTML 插入頁面時，請注意不要使用尚未轉義的使用者輸入，以防止 XSS 攻擊。
從 DOM 中刪除現有元素
同樣，你可以使用 removeChild() 方法從 DOM 中刪除子節點。此方法還返回已刪除的節點。這是一個例子：
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>
也可以在不完全知道父元素的情況下刪除子元素。只需找到子元素並使用 parentNode 屬性查詢其父元素。此屬性返回 DOM 樹中指定節點的父節點。這是一個例子：
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>
替換 DOM 中的現有元素
你還可以使用 replaceChild() 方法將 HTML DOM 中的元素替換為另一個元素。此方法接受兩個引數：要插入的節點和要替換的節點。它有語法如下，
parentNode.replaceChild(newChild, oldChild);
這是一個例子：
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
// Creating new elememt
var newPara = document.createElement("p");
var newContent = document.createTextNode("This is a new paragraph.");
newPara.appendChild(newContent);
// Replacing old paragraph with newly created paragraph
parentElem.replaceChild(newPara, oldPara);
</script>