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 = '這是一個新的div元素';
也可以使用屬性innerHTML來添加HTML內容。
示例：
JavaScript
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>這是一個含有粗體文本的新div元素</strong>';
3.2 將元素插入DOM中
創建的元素需要添加到文檔中。有幾種將元素插入DOM的方法：
1. 方法 appendChild()
方法appendChild()將元素添加到指定父元素子元素列表的末尾。
示例：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>這是一個舊的div元素</div>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = '這是一個新的div元素';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. 方法 insertBefore()
方法insertBefore()將元素添加到指定父元素的子元素前面。
示例：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>這是一個舊的div元素</div>
<p>這是一個段落</p>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = '這是一個新的div元素';
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>這是一個舊的div元素</div>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = '這是一個新的div元素';
const body = document.querySelector('body');
body.append(newDiv);
4. 方法 prepend()
方法prepend()將一個或多個節點或字符串添加到指定父元素的子元素列表開頭。
示例：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>這是一個舊的div元素</div>
</body>
</html>
JavaScript
const newDiv = document.createElement('div');
newDiv.textContent = '這是一個新的div元素';
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>
這是一個div元素
<ul>
<li>元素 1</li>
<li>元素 2</li>
<li>元素 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>
這是一個div元素
<ul>
<li>元素 1</li>
<li>元素 2</li>
<li>元素 3</li>
</ul>
</div>
</body>
</html>
JavaScript
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
元素<div>被克隆，可以看到因為樣式已經應用，然而它的子元素（文本節點"這是一個div元素"和<ul>）沒有被克隆。
3.4 刪除元素
1. 方法 removeChild()
方法removeChild()從父元素中刪除子元素。
示例：
HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
這是一個div元素
<p>這是一個段落</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>這是一個div元素</div>
<p>這是一個段落</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>
這是一個div元素
<p>這是一個段落</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>
這是一個div元素
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</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>
這是一個div元素
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
<ul>
<li>元素 1</li>
<li>元素 2</li>
<li>元素 3</li>
</ul>
</div>
</body>
</html>
JavaScript
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION