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>
// 创建一个新的 div 元素
var newDiv = document.createElement("div");
// 创建文本节点
var newContent = document.createTextNode("Hi, how are you doing?");
// 将文本节点添加到新创建的 div
newDiv.appendChild(newContent);
// 将新创建的元素及其内容添加到 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>
// 创建一个新的 div 元素
var newDiv = document.createElement("div");
// 创建文本节点
var newContent = document.createTextNode("Hi, how are you doing?");
// 将文本节点添加到新创建的 div
newDiv.appendChild(newContent);
// 将新创建的元素及其内容添加到 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>
// 获取 innerHTML 包含
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
// 设置内部 HTML 内容
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>
// 选择目标元素
var mainDiv = document.getElementById("main");
// 在元素本身之前插入 HTML，作为前一个兄弟
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
// 在元素的第一个子元素之前插入 HTML
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
// 在元素的最后一个子元素之后插入 HTML
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
// 在元素本身之后插入 HTML，作为下一个兄弟
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>注意： beforebegin 和 afterend 位置仅在节点位于 DOM 树中且具有父元素时才有效。 此外，在将 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">这是一个简单的段落。</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");
// 创建新元素
var newPara = document.createElement("p");
var newContent = document.createTextNode("This is a new paragraph.");
newPara.appendChild(newContent);
// 用新创建的段落替换旧段落
parentElem.replaceChild(newPara, oldPara);
</script>