Question

我试图在下面的代码中理解innerHTML的行为。我想在每次按下按钮时永久添加一个新的div块，但似乎新块只会弹出一瞬间然后消失。

有谁知道为什么会这样，以及如何解决它？

此外，当我更改代码以使用appendChild而不是innerHTML时，我收到错误Argument 1 of Node.appendChild is not an object.。我不确定这意味着什么。

非常感谢任何帮助！

以下是代码：

<DOCTYPE html>
<html>
    <body>
        <form onSubmit="loadData()">
            <input type="submit" id="button">
        </form>

        <div id="block">List of items:</div>

        <script>
            function loadData(){
                document.getElementById("block").innerHTML += "<div>item</div>";
            //  document.getElementById("block").appendChild("<div>item</div>");

            };

        </script>
    </body>
</html>

Answer 1

因为您正在提交，所以页面重新加载并且您的HTML已被删除。

如果您需要保留项目，则需要使用cookie，localStorage或服务器端解决方案。

function addItem() 
{
  document.getElementById("block").innerHTML += "<div>item</div>";
}

<DOCTYPE html>
  <html>

  <body>
    <form>
      <input type="button" id="button" onclick="addItem()" />
    </form>

    <div id="block">List of items:</div>


  </body>

  </html>

Answer 2

您正在提交该页面。 appendChild或innerHtml在提交之后直接发生，在加载新页面之前。加载新页面后，当前页面（带有应用的修改）将被取消并替换为新页面。

如果您想在新页面上发生某些事情，则需要在该页面上执行代码。（或者不要使用表单提交，而是使用ajax来发送表单）。

appendChild不适合你的原因是appendChild要求dom节点作为参数，而不是字符串。它就像document.getElementById("foo).appendChild(document.createElement("div"))。（棘手的部分是，使用createElement，你得到一个空元素，你还需要将你想要的内容放入其中。

Answer 3

你的第一个问题已由@lee回答。你的第二个答案的问题是，你不能像你一样使用appendChild。如果你想使用追加孩子，根据mozilla developer docs你将不得不这样：

var mydiv = document.createElement("div");
mydiv.appendChild(document.createTextNode("item"));
document.getElementById("block").appendChild(mydiv);

获取您要求的结果。

innerHTML不会永久添加HTML元素

3 个答案: