JS - 在 <div> 标签上插入元素

Question

我需要添加一个带有一些元素的标签，但是 innerHTML 插入在 appendChild 之前。我的 Js 函数：

function addFields(){
    var isbn_container = document.getElementById("isbn_container");
    isbn_container.innerHTML += "<div>";
    var div = document.createElement("div");
    var input = document.createElement("input");
    input.type = "text";
    input.name = "new-isbn-10[]";
    isbn_container.appendChild(input);

    var input2 = document.createElement("input");
    input2.type = "text";
    input2.name = "new-isbn-13[]";
    isbn_container.appendChild(input2);
    isbn_container.innerHTML += "<span onclick='deleted(this);'> delete</span>";
    isbn_container.appendChild(document.createElement("br"));
    isbn_container.appendChild(document.createElement("br"));
    isbn_container.after.innerHTML += "</div>";
}

结果：

<div></div>
<input type="text" name="new-isbn-10[]">
<input type="text" name="new-isbn-13[]">
<span onclick="deleted(this);"> delete</span>
<br><br>

但我想要：

<div>
<input type="text" name="new-isbn-10[]">
<input type="text" name="new-isbn-13[]">
<span onclick="deleted(this);"> delete</span>
<br><br>
</div>

请帮帮我。

Answer 1

在您的代码中：

function addFields(){
    var isbn_container = document.getElementById("isbn_container");
    isbn_container.innerHTML += "<div>";

不要那样做，它是无效的标记并且完全没有必要给出以下行：

    var div = document.createElement("div");
    var input = document.createElement("input");
    input.type = "text";
    input.name = "new-isbn-10[]";
    isbn_container.appendChild(input);

你想要这个在 div 里面，所以不要那样做，把它添加到 div:

    div.appendChild(input);

这里也一样：

    var input2 = document.createElement("input");
    input2.type = "text";
    input2.name = "new-isbn-13[]";
    isbn_container.appendChild(input2);

替换为：

    div.appendChild(input2);

同样，向 isbn_container 添加东西不会将其放入 div，所以不要这样做：

    isbn_container.innerHTML += "<span onclick='deleted(this);'> delete</span>";
    isbn_container.appendChild(document.createElement("br"));
    isbn_container.appendChild(document.createElement("br"));

这样做：

    div.innerHTML += "<span onclick='deleted(this);'> delete</span>";
    div.appendChild(document.createElement("br"));
    div.appendChild(document.createElement("br"));

现在所有内容都在 div 中，因此您现在可以将 div 添加到文档中：

    isbn_container.appendChild(div);
}

JS - 在 <div> 标签上插入元素

JS - Insert element on the <div> tag

javascript

html

add

innerhtml