跨浏览器的innerText设置值

比方说，我有以下代码：跨浏览器的innerText设置值

<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';

但我不喜欢上面的食谱，因为它不是紧凑。

你有什么建议，为什么第一种方法不起作用？

来源

2012-07-25 Erik

为什么不把第二个解决方案放入一个函数中，该函数带有一个元素参数和一个字符串参数。那么你只需要执行'setText（mydiv，“new text”）;' – 2012-07-25 09:17:28

它不是'document.getElementByid'它应该是'document.getElementById'''''''应该是大写的。 – 2012-07-25 09:29:58

'd [（'d'中的'innerText'）？ 'innerText'：'textContent'] ='新文字';' – 2017-08-24 18:25:42

而是多次转让的，你可以抓住的财产和使用

var text = ('innerText' in d)? 'innerText' : 'textContent'; 
d[text] = 'New text';

来源

2012-07-25 09:25:10

太棒了！这是我需要的。非常感谢。 – Erik 2012-07-25 09:32:18

这是一个很好的处理方式，很高兴我偶然发现了它。 – 2013-03-26 13:50:00

第一种方法不起作用，因为它所做的只是将变量设置为新值，而不会将值写入元素。该生产线

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，Closure，或any of several others。很明显，如果没有一个图书馆，你无法做到这一点，这只是一个站在已经完成了大量工作的人肩上的问题。 :-)

在这种情况下，例如，使用jQuery上面会：

$("#d").text("new text");

就是这样。

来源

2012-07-25 09:16:09

感谢您的回复，但我需要innerText。好的，我将使用分支 – Erik 2012-07-25 09:19:31

YUI有一个innerText方法吗？ – Erik 2012-07-25 09:20:58

@Erik：很高兴帮助。我解释了它是如何工作的（功能测试）。 – 2012-07-25 09:21:03

d.appendChild(document.createTextNode("new text");

来源

2014-08-08 10:35:56 gumkins

可以使用textContent只&将在主流浏览器的工作......（FF，Safari浏览器Chrome的&）

var d = document.getElementById('d'); 
var msg = "new text"; 
d.textContent = msg;

来源

2015-04-12 19:54:01 horacio

跨浏览器的innerText设置值

回答

相关问题