如何使用 JavaScript 在 Html 页面中水平添加元素？

在 Html 页面中，我们经常需要在已有的元素后面添加新的元素，这时我们可以使用 JavaScript 来实现这个功能。

创建新元素

首先，我们需要创建一个新的元素。可以使用 document.createElement() 方法来创建一个新的标签元素。

var newElement = document.createElement("div");

这个示例中创建了一个 <div> 元素。

添加内容

一般来说，我们会在新元素中添加一些文本或者其他的子元素。可以使用 innerHTML 属性来添加文本，或者使用 appendChild() 方法来添加子元素。

newElement.innerHTML = "这是新元素的内容";
// 或者
var childElement = document.createElement("p");
newElement.appendChild(childElement);

这个示例中添加了一个字符串内容和一个 <p> 子元素。

找到已有元素

接下来，我们需要找到已有的元素，以便我们将新元素添加到它的后面。可以使用 document.getElementById() 方法或其他一些方法来找到已有的元素。

var existingElement = document.getElementById("existing-id");

这个示例中使用了 getElementById() 方法来找到一个已有的元素。

添加新元素

最后，我们将新元素添加到已有元素的后面，可以使用 insertAdjacentElement() 方法或者 appendChild() 方法来实现。

existingElement.insertAdjacentElement("afterend", newElement);
// 或者
existingElement.appendChild(newElement);

这个示例中使用了两种方法来将新元素添加到已有元素的后面。

以上就是使用 JavaScript 在 Html 页面中水平添加元素的基本方法。