Question

我需要添加一个带有一些Element的标签，但是要在appendChild之前插入innerHTML。我的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>标签</div>上插入元素

1 个答案: