3.1 创建元素
操作DOM（Document Object Model）不仅仅是浏览现有的元素，还包括创建新元素、将它们插入文档和删除元素。现在我们来看看在DOM中创建和删除元素的各种方法和策略。
方法 document.createElement()
创建DOM中新元素的主要方法是 document.createElement()。这个方法接受一个要创建的元素标签的名字，并返回一个新的空元素。
例子：
JavaScript
const newDiv = document.createElement('div');
向元素中添加内容
在创建了一个新的元素后，你可以为它添加内容。这可以是文本、其他元素或者它们的组合。
例子：
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
也可以使用 innerHTML 属性来添加HTML内容。
例子：
JavaScript
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 将元素插入DOM
需要将创建的元素添加到文档中。有几种方法可以将元素插入DOM中：
1. 方法 appendChild()
方法 appendChild() 将元素添加到指定父元素的子元素列表的末尾。
例子：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. 方法 insertBefore()
方法 insertBefore() 将元素添加到指定父元素的指定子元素前面。
例子：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. 方法 append()
方法 append() 将一个或多个节点或字符串添加到指定父元素的子元素列表的末尾。
例子：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. 方法 prepend()
方法 prepend() 将一个或多个节点或字符串添加到指定父元素的子元素列表的开头。
例子：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 克隆元素
方法 cloneNode() 可以克隆元素。克隆可以是深度克隆（复制所有子元素）或浅克隆（仅复制元素本身）。
深度克隆示例：
HTML
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
JavaScript
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
浅拷贝范例：
HTML
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
JavaScript
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
元素 <div> 被克隆，可以通过样式看到，但是其子元素（文本节点 "This is a div element" 和 <ul>）没有被克隆。
3.4 删除元素
1. 方法 removeChild()
方法 removeChild() 从父元素中删除一个子元素。
例子：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
JavaScript
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. 方法 remove()
方法 remove() 直接从DOM中删除一个元素。
例子：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
JavaScript
const element = document.querySelector('div');
element.remove();
3. 清除元素内容
方法 innerHTML 可以通过赋值一个空字符串来删除元素的所有内容。
例子：
HTML
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
JavaScript
const element = document.querySelector('div');
element.innerHTML = '';
4. 删除所有子元素
可以使用循环或方法 innerHTML 来删除所有子元素。
循环示例：
HTML
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
JavaScript
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
innerHTML 示例：
HTML
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
JavaScript
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION