📌  相关文章
📜  HTML DOM ParentNode.append() 方法(1)

📅  最后修改于: 2023-12-03 14:41:45.905000             🧑  作者: Mango

HTML DOM ParentNode.append() 方法

ParentNode.append() 方法可向指定的父元素末尾添加一个或多个子元素节点、文本节点或 HTML 代码。

语法
parentNode.append(childNode1, childNode2, ..., childNodeN)

其中：

  • parentNode 是要添加子元素的父元素。
  • childNode1, childNode2, ..., childNodeN 是要添加到父元素的子节点、文本节点或 HTML 代码。
示例

下面的示例演示了如何向 <div> 元素中添加一个文本节点、一个元素节点和一些 HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>append() 方法示例</title>
</head>
<body>

	<p>向 <code>&lt;div&gt;</code> 元素添加一个文本节点、一个元素节点和一些 HTML 代码:</p>

	<div id="myDiv">原始内容</div>

	<p>点击按钮添加新内容:</p>

	<button onclick="addContent()">添加内容</button>

	<script>
		function addContent() {
			// 创建要添加的节点和 HTML 代码
			var textNode = document.createTextNode("文本节点");
			var newElement = document.createElement("p");
			newElement.innerText = "元素节点";
			var html = '<b>HTML</b> 代码';

			// 获取要添加节点的父元素
			var parent = document.getElementById("myDiv");

			// 向父元素中添加节点和 HTML 代码
			parent.append(textNode, newElement, html);
		}
	</script>

</body>
</html>

执行上述代码并点击 "添加内容" 按钮后，会向 <div> 元素中添加一个文本节点、一个元素节点和一些 HTML 代码。

注意事项
  • ParentNode.append() 方法是在指定的父元素的末尾添加子元素。如果需要在指定位置插入节点，可以使用 ParentNode.insertBefore() 方法。
  • 使用 .innerHTML 属性添加 HTML 代码存在安全隐患，因为其中可能包含恶意代码。如果想要添加 HTML 代码，请使用 .insertAdjacentHTML() 方法。