textarea 的下一个兄弟有什么问题？答案

【问题标题】：What is wrong with the next sibling of the textarea?textarea 的下一个兄弟有什么问题？
【发布时间】：2015-07-20 10:49:18
【问题描述】：

当这个脚本被插入到 HTML 文档中时，它会导致奇怪的行为。显示的 textarea 元素在插入 <br> 标记后会丢失其值（我已经在 Chrome 42 中对其进行了测试）：

var text = document.createElement("textarea");
document.body.appendChild(text);
text.value = "text";
alert("value presents");
document.body.innerHTML += "<br>"; //(*)
alert("value absents");

这是什么原因？

【问题讨论】：

标签： javascript html dom innerhtml

【解决方案1】：

那你为什么不这样做

document.body.appendChild(document.createElement("br"));

所以当您使用 innerHTML 设置您无法控制的字符串时，仍然存在安全风险。例如： var name = "<img src=x onerror=alert(1)>"; el.innerHTML = name; // shows the alert 因此，建议您在插入纯文本时不要使用 innerHTML；相反，使用 node.textContent。这不会将传递的内容解释为 HTML，而是将其作为原始文本插入。

read for details here

【讨论】：

虽然重要信息，但这不是问题的答案。
@Guffa 我想我们最终都有相同的建议.. 最初我认为 OP 对 innerHTML 属性了解不多，所以认为他应该详细检查一下......无论如何谢谢。 .

【解决方案2】：

innerHTML 属性是一把大锤。

通过调用document.body.innerHTML += '<br>'，您所做的是从<body> 中删除每个元素，并将它们替换为恰好共享相同结构的全新元素。

value 属性是在原始 <textarea> 上设置的，但全新的从未设置其 value 属性。

如果您只想附加一个 <br> 元素，请创建一个并通过 DOM api 附加它：

var br = document.createElement('br');
document.body.appendChild(br);

【讨论】：

@Mike'Pomax'Kamermans，foo += bar 与 foo = foo + bar 相同。所以我不明白这有什么关系。整个 DOM 字符串正在被替换，只是碰巧其中一些具有相似的值。

【解决方案3】：

改变这个：

document.body.innerHTML += "<br>";

到这里：

document.body.appendChild(document.createElement("br"));

这会将单个新元素附加到 DOM，而不是用所有新元素替换 DOM 的全部内容。

当你这样做时：

document.body.innerHTML += "<br>";

相当于这个：

var str = document.body.innerHTML;
str += "<br>";
document.body.innerHTML = str;

因此，您将整个 body DOM 转换为一个 HTML 字符串，在字符串的末尾添加一个东西，然后用一段新的 HTML 替换整个 body DOM，这将创建所有新元素。

除了这样做的效率低下之外，它还会用不同的 DOM 元素替换所有 DOM 元素，因此任何 DOM 引用或事件处理程序现在都会被破坏，并且您对 DOM 元素所做的任何动态更改都不会反映在 HTML 中会丢失。

【讨论】：

特别感谢关于损坏的 DOM 引用的解释

【解决方案4】：

当你像这样使用+= 运算符时你在做什么：

document.body.innerHTML += "<br>";

等同于：

document.body.innerHTML = document.body.innerHTML + "<br>";

因此，您将获取正文中的所有元素并转换为 HTML 代码，添加更多 HTML 代码，然后再次将其转换为元素。

当您获取元素的 HTML 代码时，您只能获取创建它的原始 HTML 代码，而不是当前值。文本区域内的文本被重置为创建时的状态，即在您设置 value 属性之前。

要添加一个元素，您应该创建它并附加它。这不会破坏已经存在的元素：

var br = document.createElement("br");
document.body.appendChild(br);

【讨论】：