JavaScript 添加相邻的 HTML

在 Web 开发中，我们常常需要在页面中动态添加相邻的 HTML 元素。这可以通过 JavaScript 实现，本文将介绍如何使用 JavaScript 添加相邻的 HTML。

1. 使用 innerHTML 属性添加 HTML

JavaScript 中的 innerHTML 属性允许我们在指定元素内部插入 HTML 代码。我们可以通过创建一个包含需要添加相邻元素的字符串，然后将其赋值给 innerHTML 属性即可。

const targetElement = document.getElementById("target");
targetElement.innerHTML += "<div class='new-element'>New Element</div>";

上面的代码会将一段 HTML 代码字符串添加到指定元素的内部。请注意，innerHTML 属性会替换元素现有的内容。如果您需要在元素的末尾添加 HTML 代码，您需要使用加号将新 HTML 代码附加到元素的现有内容上。

2. 使用 insertAdjacentHTML() 方法添加 HTML

另一种向元素添加 HTML 的方式是使用 JavaScript 的 insertAdjacentHTML() 方法。与 innerHTML 属性不同，insertAdjacentHTML() 方法允许我们在元素的特定位置添加 HTML 代码。

const targetElement = document.getElementById("target");
targetElement.insertAdjacentHTML("beforeend", "<div class='new-element'>New Element</div>");

上面的代码会在指定元素的末尾添加一个新的 div 元素。insertAdjacentHTML() 方法有四个参数，分别代表要添加的 HTML 代码的位置，以及要添加的 HTML 代码字符串。可能的位置值为：

• "beforebegin"：在元素之前添加 HTML 代码。
• "afterbegin"：在元素的开始标记后添加 HTML 代码。
• "beforeend"：在元素的结束标记前添加 HTML 代码。
• "afterend"：在元素之后添加 HTML 代码。

3. 使用 createElement() 方法创建元素

如果您需要更精细地控制新添加的元素的属性和样式，您可以使用 createElement() 方法创建新的 HTML 元素。

const targetElement = document.getElementById("target");
const newElement = document.createElement("div");
newElement.classList.add("new-element");
newElement.textContent = "New Element";
targetElement.appendChild(newElement);

上面的代码会创建一个新的 div 元素，并添加一个类名和文本内容。然后，它会将这个新元素添加到指定的目标元素中。

结论

JavaScript 提供了很多添加相邻 HTML 元素的方法。我们可以使用 innerHTML 属性添加简单的 HTML 代码字符串，使用 insertAdjacentHTML() 方法添加到特定位置，或使用 createElement() 方法创建完全自定义的新 HTML 元素。无论您选择哪种方法，都可以在 Web 页面中动态添加相邻的 HTML 元素。