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>