如何使用 Javascript 创建新HTML元素

在 Javascript中，可以通过编程方式创建新的 HTML 元素。这允许您在特定条件下向页面添加内容。

创建元素的基础知识#

要开始创建元素，我们需要定义它是什么元素。为此，我们可以使用以下document.createElement函数：

const myNewElement = document.createElement('div');

现在我们有了一个新的 div，但它还不存在于任何地方。这个变量现在是HTMLObject类型。这意味着我们可以在其上使用所有典型的 HTMLObject 属性。在我们将它添加到我们的页面之前，让我们给它添加一些东西。

const myNewElement = document.createElement('div');
// Lets make it red
myNewElement.style.color = 'red';
// Lets add a class called 'active' to it
myNewElement.classList.add('active');
// Lets add an attribute called 'data-attribute'
myNewElement.setAttribute('data-attribute', true);
// Lets add some text inside the div
myNewElement.textContent = 'I am a created element.'

太好了，现在我们已经将我们需要的一切添加到我们的元素中了。让我们将它添加到我们的文档中。

如何将 Javascript HTML 元素添加到页面#

向页面添加新 HTML 元素的最简单方法是使用append. 假设我们要将新创建的 HTML 元素添加到ID 为“ my-id ”的 div 中。我们可以这样做：

const myNewElement = document.createElement('div');
// Lets make it red
myNewElement.style.color = 'red';
// Lets add a class called 'active' to it
myNewElement.classList.add('active');
// Lets add an attribute called 'data-attribute'
myNewElement.setAttribute('data-attribute', true);
// Lets add some text inside the div
myNewElement.textContent = 'I am a created element.'
// Let's append our item to the HTML document.
document.getElementById('my-id').append(myNewElement);

为了演示，下面是一个示例，其中单击按钮会在 div 中创建一个新元素：

document.getElementById('button').addEventListener('click', function(e) {
    const myNewElement = document.createElement('div');
    // Lets make it red
    myNewElement.style.color = 'red';
    // Lets add a class called 'active' to it
    myNewElement.classList.add('active');
    // Lets add an attribute called 'data-attribute'
    myNewElement.setAttribute('data-attribute', true);
    // Lets add some text inside the div
    myNewElement.textContent = 'I am a created element.'
    // Let's append our item to the HTML document.
    document.getElementById('my-id').append(myNewElement);
});

点我

使用 Javascript 前置 HTML 元素#

前置意味着将元素放在开头，而不是结尾，使用prependinstead of可以很容易地做到这一点append：

document.getElementById('my-id').prepend(myNewElement);

附加 innerHTML 的替代方法#

我们可以将 HTML 直接附加到页面的另一种方法是更改​​元素 innerHTML。每个HTML 元素都有一个innerHTML属性，它是该元素内的所有 HTML。

注意： innerHTML 存在安全问题，但如果您对正在制作的 HTML 有严格的控制，通常就没有问题。添加创建的元素的示例innerHTML如下所示：

const myNewElement = document.createElement('div');
// Lets make it red
myNewElement.style.color = 'red';
// Lets add a class called 'active' to it
myNewElement.classList.add('active');
// Lets add an attribute called 'data-attribute'
myNewElement.setAttribute('data-attribute', true);
// Lets add some text inside the div
myNewElement.textContent = 'I am a created element.'
// Let's append our item to the HTML document.
document.getElementById('my-id').innerHTML = document.getElementById('my-id').innerHTML + myNewElement.outerHTML;

您还可以通过将新元素放在原始 HTML之前来添加元素，换句话说，通过颠倒顺序：

document.getElementById('my-id').innerHTML = myNewElement + document.getElementById('my-id').innerHTML;

在特定元素之后插入 HTML 元素#

也可以在特定的 HTML 节点之后插入一个新元素。例如，假设您有一个如下所示的 div：

<div id="my-div">
    I am a div!
    <span id="some-span">Hello</span>
    <em>This is italic</em>
</div>

这个 div 中有 3 个节点：text、span 和 em，都算作单独的节点。因此，我们可以insertBefore在节点 2（跨度）之前插入我们的新元素：

let theSpan = document.getElementById('some-span');
document.getElementById('my-id').insertBefore(myNewElement, theSpan);

它的语法与以前类似——我们通过元素的 ID 获取元素，然后使用insertBefore. 然后，我们有两个参数 – 第一个是我们要插入的新元素 ( myNewElement )，第二个是我们之前插入myNewElement的元素的引用。

通过这样做，我们最终得到了这个 HTML：

<div id="my-div">
    I am a div!
    <div class="active" data-attribute="true" style="color: red;">I am a created element.</div>
    <span id="some-span">Hello</span>
    <em>This is italic</em>
</div>