📅 最后修改于: 2023-12-03 15:23:10.970000 🧑 作者: Mango
在 Web 开发中，经常会用到 jQuery 来操作 DOM，但其实在 jQuery 出现之前，Javascript 也是有很多操作 DOM 的方法的。本文将介绍如何在不使用 jQuery 的情况下，在 Javascript 中追加 DOM 元素。
在 Javascript 中，可以使用以下代码向 DOM 中追加元素：
// 创建一个新的元素
var element = document.createElement("div");
// 给新元素设置属性
element.setAttribute("id", "newElement");
// 获取要追加到的父元素
var parent = document.getElementById("parentElement");
// 将新元素追加到父元素中
parent.appendChild(element);
上面的代码会创建一个新的 <div> 元素，并且给它设置了一个 ID 属性。然后，通过 getElementById 方法获取要将它追加到的父元素，并使用 appendChild 方法将新元素追加到父元素中。
下面的示例代码演示了如何在 Javascript 中追加 DOM 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在 Javascript 中追加 DOM 元素</title>
</head>
<body>
<h1 id="title">Hello World!</h1>
<button id="addButton">添加新元素</button>
<script>
var addButton = document.getElementById("addButton");
addButton.addEventListener("click", function() {
var newElement = document.createElement("p");
newElement.textContent = "这是一个新段落";
var title = document.getElementById("title");
title.parentNode.insertBefore(newElement, title.nextSibling);
});
</script>
</body>
</html>
上面的代码创建了一个按钮和一个标题，当用户点击按钮时，会在标题后面追加一个新的段落元素。这是通过使用 insertBefore 方法实现的，它在指定元素之前插入一个新元素。
在 Web 开发中，jQuery 是一款非常流行的 Javascript 库，它使得操作 DOM 变得十分简单。但是，如果不想使用 jQuery，Javascript 本身也是有很多操作 DOM 的方法的。本文介绍了一种在 Javascript 中追加 DOM 元素的方法，希望对你有所帮助。