用于设置值的跨浏览器 innerText
Posted
技术标签:
【中文标题】用于设置值的跨浏览器 innerText【英文标题】：Cross-browser innerText for setting values 【发布时间】：2012-07-23 16:30:38 【问题描述】：假设我有以下代码：
<html>
<head></head>
<body>
<div id="d">some text</div>
<script type="text/javascript">
var d = document.getElementByid('d');
var innerText = d.innerText || d.textContent;
innerText = 'new text';
</script>
</body>
</html>
我想更改 id='d' 的 div 标签的文本值。不幸的是，上面的代码块不起作用，文本内容也没有改变。
如果执行以下配方，它会起作用：
if (d.innerText) d.innerText = 'new text';
else d.textContent = 'new text';
但我不喜欢上面的食谱，因为它不紧凑。
你有什么建议为什么第一种方法不起作用？
【问题讨论】：
为什么不将第二种解决方案放入一个函数中，其中一个参数用于元素，一个参数用于字符串。然后你只需要做setText(mydiv, "new text");
不是document.getElementByid 应该是document.getElementById I id 应该大写。
d[('innerText' in d) ? 'innerText' : 'textContent' ] = 'New text';
【参考方案1】：
您可以获取属性并使用它，而不是多次分配
var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';
【讨论】：
太棒了！这是我需要的。非常感谢。 这是一种绝妙的处理方式，很高兴我偶然发现了它。【参考方案2】：第一种方法不起作用，因为它所做的只是将变量设置为新值，而不是将值写入元素。线
var innerText = d.innerText || d.textContent;
...将变量innerText 设置为它找到的文本属性的值，它不是对实际属性本身的引用。
你必须做分支，例如：
var d = document.getElementById('d');
var msg = "new text";
if ("innerText" in d)
d.innerText = msg;
else
d.textContent = msg;
该功能-通过查找元素上是否存在属性来检测浏览器是否使用innerText或textContent（这就是in运算符所做的，检查对象是否具有具有给定名称的属性，即使该属性为空，null、undefined 等）。
你甚至可以为它自己写一个函数：
var setText = (function()
function setTextInnerText(element, msg)
element.innerText = msg;
function setTextTextContent(element, msg)
element.textContent = msg;
return "innerText" in document.createElement('span') ? setTextInnerText : setTextTextContent;
)();
它只进行一次特征检测，并返回一个函数，任何半体面的引擎都会为您内联。
或者，如果您希望将消息中的 HTML 标记作为标记（而不是文字文本）处理，您可以使用 innerHTML（这在浏览器中是一致的）。但同样，如果您使用innerHTML，则会处理可能不是您想要的标记。
我发现使用好的 JavaScript 库来处理这些浏览器差异（并提供更多有用的功能）很有用，例如 jQuery、YUI、@987654323 @，或any of several others。显然，没有图书馆就无法做到，这只是站在已经完成大量工作的人们的肩膀上的问题。 :-)
在这种情况下，例如，使用 jQuery，上面将是：
$("#d").text("new text");
就是这样。
【讨论】：
感谢您的回复，但我需要innerText。好的，我会使用分支 YUI 有方法 innerText 吗？ @Erik：很高兴有帮助。我解释了它是如何工作的（功能测试）。 @Erik: "YUI 有方法 innerText" 粗略搜索一下文档建议that yes, it does。 （我不使用 YUI，但文档很容易使用。） 您的代码将无法工作，因为它有一个错字getElementByid 应该是getElementById【参考方案3】：
d.appendChild(document.createTextNode("new text");
【讨论】：
【参考方案4】：您只能使用textContent，它适用于主流浏览器...（FF、Safari 和 Chrome）
var d = document.getElementById('d');
var msg = "new text";
d.textContent = msg;
【讨论】：
以上是关于用于设置值的跨浏览器 innerText的主要内容，如果未能解决你的问题，请参考以下文章
从 javascript 用于 Web 应用程序的跨浏览器最稳定的模态对话框实现是啥？
将 IFrame 设置为“about:blank”的跨浏览器方式？