innerHTML 不会永久添加 HTML 元素
Posted
技术标签:
【中文标题】innerHTML 不会永久添加 HTML 元素【英文标题】：innerHTML doesn't add HTML elements permanently 【发布时间】：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 在这种情况下不起作用？谢谢！
【参考方案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以上是关于innerHTML 不会永久添加 HTML 元素的主要内容，如果未能解决你的问题，请参考以下文章
使用 innerHtml 添加的元素不受 Javascript 库影响
JavaScript中，可以用元素的innerHTML直接添加子元素吗？
在JavaScript中的元素之前添加innerHTML？ [复制]