创建元素
// Create an li element
const pythonElement = document.createElement("li");
设置元素属性
// ...
pythonElement.id = "python"; // Define element ID
pythonElement.textContent = "Python"; // Define its text content
将元素插入 DOM
// Insert the new element into the DOM
document.getElementById("languages").appendChild(pythonElement);
演示
<html>
<head>
</head>
<body>
<h3 class="beginning">Some languages</h3>
<div id="content">
<ul id="languages">
<li id="cpp">C++</li>
<li id="java">Java</li>
<li id="csharp">C#</li>
<li id="php">PHP</li>
</ul>
</div>
</body>
</html>
向列表中插入 Ruby
const rubyElement = document.createElement("li"); // Create an "li" element
rubyElement.id = "ruby"; // Define element ID
rubyElement.appendChild(document.createTextNode("Ruby")); // Define its text content
document.getElementById("languages").appendChild(rubyElement); // Insert the new element into the DOM
在一个节点之前添加一个节点
const perlElement = document.createElement("li"); // Create an "li" element
perlElement.id = "perl"; // Define element ID
perlElement.textContent = "Perl"; // Define its text content
// Insert the new element before the "PHP" node
document.getElementById("languages").insertBefore(perlElement, document.getElementById("php"));
确定新节点的位置
insertAdjacentHTML() 方法非常精确地定义了插入元素的位置。您可以在现有元素上调用它,并将位置和代表要添加的新内容的HTML字符串传递给它。新内容的位置应该是:
- beforebegin:在现有元素之前
- afterbegin:在现有元素内,其第一个子元素之前
- beforeend:在现有元素内,在其最后一个子元素之后
- afterend:在现有元素之后
以下是这些位置相对于 <p> 标签的位置。
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
以下示例用 InsertAdjacentHTML() 将 JavaScript 添加到语言列表顶部。
// Add an element to the beginning of a list
document.getElementById('languages').insertAdjacentHTML("afterBegin", '<li id="javascript">JavaScript</li>');