如何在 JavaScript 中为 Chrome 设置 innerText？答案

【问题标题】：How to set innerText in JavaScript for Chrome?如何在 JavaScript 中为 Chrome 设置 innerText？
【发布时间】：2014-12-10 19:47:21
【问题描述】：

我正在尝试在 Chrome 中设置元素的开始和结束标记之间的 innerText，但到目前为止它不起作用。这是为什么？我试过这些：

element.balanceText = "Changed.";
element.innerText = "Changed.";
element.innerHTML = "Changed.";
element.textContent = "Changed.";
element.value = "Changed.";
$(element).val("Changed.");

这里是小提琴：http://jsfiddle.net/La1tadpd/

【问题讨论】：

标签： javascript html google-chrome text innertext

【解决方案1】：

您的 jsFiddle 配置为使用 Coffee Script 而不是纯 JavaScript，因此，您会收到错误消息：

未捕获的语法错误：保留字“var”

由于输入标签是无效的 HTML，我建议删除浏览器创建的附加文本节点，然后将输入元素替换为包含所需文本的 div：

var element = document.getElementById('test');
element.nextSibling.parentNode.removeChild(element.nextSibling);

var div = document.createElement('div');
div.textContent = 'Changed.';

element.parentNode.replaceChild(div, element);

&lt;input id='test'&gt;Hello&lt;/input&gt;

【讨论】：

很好，但是......你可能会觉得这很奇怪，但对于我想要做的事情，我需要设置“已更改”。在输入元素的标签之间......所以当我检查页面时，我想看到 Changed. 现在，虽然 element.value 有效，但我仍然看到“Hello”。在元素旁边。
明白。不幸的是，该站点的 HTML 超出了我的控制范围，我只能使用 JavaScript（我将 JavaScript 注入到 Outlook Web App 的客户 default.aspx 中）。它使用 MVC，这就是它呈现这个控件的方式，格式错误等等。除了格式错误之外，有没有办法在这样的两个标签之间设置文本？

【解决方案2】：

input 是一个 void 元素，除了你不能做任何事情

所以我们写<input/> 而不是<input></input> 因为它不能有自定义内容

在这里查看教程http://naveendev.hol.es/tutorial/void-elements-in-html

NoModificationAllowedError：无法在“HTMLElement”上设置“innerText”属性：“input”元素不支持文本插入。

因为它是一个空元素

【讨论】：