使用元素的值与innerHTML？答案

【问题标题】：Using value of an element vs innerHTML?使用元素的值与innerHTML？
【发布时间】：2015-04-10 00:33:14
【问题描述】：

我知道他们说 innerHTML 不安全并且可能很慢，尽管它现在是 HTML5 的一部分。另一方面，使用 DOM 可能很冗长。

如果使用例如值呢？按钮的值？

function changeit (valueff, idP){
var change_item = prompt("Change this item",valueff);    
if (change_item)
{
    document.getElementById(idP).value = change_item;
}
...

这是使用 Codeigniter 制作的餐厅菜单。所以函数接收一个按钮的值，它的id，然后根据管理员的输入改变值。然后它对数据库进行 ajax 调用并更改相关条目。我当然计划清理输入。

那么上面的方法比使用 textarea 和 innerHTML 更好吗？：

 document.getElementById(idP).innerHTML = change_item;

要更改的值可以是菜单中的一行，例如Espresso 2.50 美元，我用按钮也没关系，只要管理员可以点击它并更改实际菜单中的值即可。

<input id="list_5" type="button" value="Espresso $2.50"   onclick="changeit(this.value,this.id);">

编辑：

如果你用谷歌搜索为什么 innerHTML 不好 - 你会得到很多结果，例如（例如这个关于 SO 的答案）[Why is "element.innerHTML+=" bad code?

【问题讨论】：

innerHTML 一点也不慢。 jQuery 大量使用它来设置/获取元素内容。 “值 vs. innerHTML”？从逻辑上讲，这取决于您是要更改值还是元素的 HTML。
很多人说innerHTML不安全
我从未读过一篇严肃的文章说为什么 innerHTML is/*should* is unsafe.
我想我的问题还不清楚。是 getElementById(idP).value = change_item;优于 getElementById(idP).innerHTML = change_item; ?在这两种情况下，我都会更改元素的文本，只是两种不同的方法，因为许多人说 innerHTML 不安全。
您不能使用 element.value = "blah" 更改 DIV 元素的文本。 value 仅适用于表单操作元素。

标签： javascript html codeigniter innerhtml

【解决方案1】：

当您提交表单时，它会发送其输入值而不是 innerHTML。

但 textarea 具有特殊行为，当您更改 innerHTML 时，它会自动更改 value。

例如，如果你有 textarea:

<textarea id='test'></textarea>

然后你设置它的innerHTML：

var textarea=document.getElementById('test');
textarea.innerHTML='this text is in innerHTML';
conosole.log(textarea.value); //'this text is in innerHTML'

如果您尝试为输入或按钮设置 innerHTML，则其值不会像 textarea 那样更改，因此当您发送表单时，它将发送空字符串。

<input type='text' id='inp' />

var inp=document.getElementById('inp');
inp.innerHTML='this text is in innerHTML';
conosole.log(inp.value); //'' (empty string)

【讨论】：

是的，不同的是textarea 不是void 元素（需要关闭</textarea>），因此innerHTML 与@987654329 共享相同的字符串@属性。
这是一个按钮 -> 和 Im用上面的代码轻松改变它的值
您在帖子中提到的帖子是在谈论性能而不是安全。以及包含诸如 div 和 body 标签等元素的性能。因为您使用的是 textarea。我认为 innerHTML 和 value 之间没有区别
"...我知道他们说 innerHTML 不安全并且可能很慢"
在 div 等容器中可能会很慢，但在 textarea 中则不会。但使用 `innerHTML 没有安全问题

【解决方案2】：

您正在将奶牛与芭蕾混合在一起。
如果您只需要对inputs 和textareas 进行操作，让我们简而言之：使用
yourElement.value = "some value"。

（在任何情况下，您都不能在input 元素上使用innerHTML。）

【讨论】：

@VeganSv 好吧，我又读了两次你的问题，完全不清楚你要改变哪些元素的值。
@VeganSv 您在问题中说您将清理价值。您害怕使用innerHTML 将所需的值放入表格中吗？
感谢您的宝贵时间！

【解决方案3】：

尝试使用textContent 而不是innerHTML。

使用 innerHTML 修改文档会导致文档重新解析，效率低下并且具有严重的缺点，包括使任何对被替换 DOM 节点的 JavaScript 引用无效，清除被替换的 DOM 节点上的任何 JavaScript 属性和事件侦听器，并重新执行更改后的标记中的任何脚本标签。

希望对你有用。

【讨论】：