innerHTML 不会永久添加 HTML 元素答案

【问题标题】：innerHTML doesn't add HTML elements permanentlyinnerHTML 不会永久添加 HTML 元素
【发布时间】：2016-07-07 01:13:59
【问题描述】：

我试图了解下面代码中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>

【问题讨论】：

您正在使用导致重新加载的提交按钮。使用普通按钮就不会出现这个问题。
所以我用这个<button id="button">Submit</button>替换了输入标签。当我按下按钮时似乎什么都没有发生
那是因为您的代码只添加了“onSubmit”项。查看我的解决方案和 cmets...
啊，好吧，那部分就解决了。您是否碰巧知道为什么 appendChild 在这种情况下不起作用？谢谢！

标签： html innerhtml appendchild

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢马蒂亚斯！我想尝试使用 ajax 发送表单，因为这对我来说是新事物。你介意给我一个示例代码，展示如何在我上面的案例中采用 ajax 吗？

【解决方案3】：

@lee 已经回答了您的第一个问题。您对第二个答案的问题是，您不能像以前那样使用 appendChild。如果你想使用 append child，根据mozilla developer docs 你将不得不这样：

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

得到你要求的结果。

【讨论】：

感谢 suits_at！假设，我想向新创建的 div 添加一些属性，而不是仅仅添加文本“item”，例如类，高度，宽度属性，我该怎么做？
同样可以创建属性节点。为了更轻松地处理代码，我刚刚为您制作了一个简短的代码笔。 codepen.io/suits_at/pen/WwppMy