Question

我知道他们说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然后根据admin的输入改变值。然后它对数据库进行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?

Answer 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)

Answer 2

你将奶牛与芭蕾混合在一起如果您只需要在input和textarea下操作，请将其缩短：使用
yourElement.value = "some value"。

（在任何情况下，您都无法使用innerHTML对input元素进行操作。）

Answer 3

尝试使用textContent代替innerHTML。

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

希望它对你有用。

使用元素的值vs innerHTML？

3 个答案: