blocks|key|1463638|text|火狐使用W3C-compliant+textContent属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1463639|我猜Safari和Opera也支持这个属性。|1463640|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent|1|https://developer.mozilla.org/En/DOM/Node.textContent^0|4|D|0|I|B|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Firefox uses the <a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent" rel="noreferrer">W3C-compliant</a> <a href="https://developer.mozilla.org/En/DOM/Node.textContent" rel="noreferrer">textContent</a> property.

I'd guess Safari and Opera also support this property.

blocks|key|1463691|text|如果您只需要设置文本内容而不需要检索，这里有一个简单的DOM版本，您可以在任何浏览器上使用；它既不需要IE+innerText扩展，也不需要DOM+Level+3Core+textContent属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463692|function+setTextContent(element,+text)+{
++++while+(element.firstChild!==null)
++++++++element.removeChild(element.firstChild);+//+remove+all+existing+content
++++element.appendChild(document.createTextNode(text));
}|code-block|syntax|javascript|1463693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you only need to set text content and not retrieve, here's a trivial DOM version you can use on any browser; it doesn't require either the IE innerText extension or the DOM Level 3 Core textContent property.

<pre><code>function setTextContent(element, text) {
 while (element.firstChild!==null)
 element.removeChild(element.firstChild); // remove all existing content
 element.appendChild(document.createTextNode(text));
}
</code></pre>

blocks|key|1463771|text|jQuery提供了一个可以在任何浏览器中使用的.text()方法。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1463772|$('#myElement').text("Foo");|code-block|syntax|javascript|1463773|entityMap|0|LINK|mutability|MUTABLE|url|https://jquery.com/|1|http://api.jquery.com/text/^0|N|7|0|6|0|N|7|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<a href="https://jquery.com/" rel="noreferrer">jQuery</a> provides a <a href="http://api.jquery.com/text/" rel="noreferrer"><code>.text()</code></a> method that can be used in any browser. For example:

<pre><code>$('#myElement').text("Foo");
</code></pre>

blocks|key|1463648|text|根据Prakash+K的回答，Firefox不支持innerText属性。因此，您可以简单地测试用户代理是否支持此属性，并按如下方式进行操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463649|function+changeText(elem,+changeVal)+{
++++if+(typeof+elem.textContent+!==+"undefined")+{
++++++++elem.textContent+=+changeVal;
++++}+else+{
++++++++elem.innerText+=+changeVal;
++++}
}|code-block|syntax|javascript|1463650|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

As per Prakash K's answer Firefox does not support the innerText property. So you can simply test whether the user agent supports this property and proceed accordingly as below:

<pre><code>function changeText(elem, changeVal) {
 if (typeof elem.textContent !== "undefined") {
 elem.textContent = changeVal;
 } else {
 elem.innerText = changeVal;
 }
}
</code></pre>

blocks|key|1463935|text|一行非常简单的Javascript代码就可以在所有主流浏览器中获得“非标签”文本……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463936|var+myElement+=+document.getElementById('anyElementId');
var+myText+=+(myElement.innerText+%7C%7C+myElement.textContent);|code-block|syntax|javascript|1463937|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A really simple line of Javascript can get the "non-taggy" text in all main browsers...

<pre><code>var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);
</code></pre>

blocks|key|1464040|text|myElement.innerText+=+myElement.textContent+=+"foo";|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1464041|编辑(感谢Mark+Amery在下面的评论)：只有当你知道没有任何代码会像(例如)+jQuery那样依赖于检查这些属性的存在时，才可以这样做。但是如果你使用的是jQuery，你可能只需要使用"text“函数并执行$('#myElement').text('foo')，如其他一些答案所示。|unstyled|offset|length|1464042|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery/blob/9d820fbde6d89bc7a06e2704be61cf6c0b4d6e3c/test/data/jquery-1.9.1.js#L4524-L4525^0|0|16|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>myElement.innerText = myElement.textContent = "foo";
</code></pre>

Edit (thanks to Mark Amery for the comment below): Only do it this way if you know beyond a reasonable doubt that no code will be relying on checking the existence of these properties, like (for example) <a href="https://github.com/jquery/jquery/blob/9d820fbde6d89bc7a06e2704be61cf6c0b4d6e3c/test/data/jquery-1.9.1.js#L4524-L4525" rel="nofollow">jQuery</a> does. But if you are using jQuery, you would probably just use the "text" function and do $('#myElement').text('foo') as some other answers show.

blocks|key|1249377|text|innerText已经添加到火狐中，并且应该在FF45版本中可用：https://bugzilla.mozilla.org/show_bug.cgi?id=264412|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1249378|已经编写了一个规范草案，并有望在未来纳入HTML标准：http://rocallahan.github.io/innerText-spec/、https://github.com/whatwg/html/issues/465|1249379|请注意，目前Firefox、Chrome和IE的实现都不兼容。展望未来，我们可能会期待Firefox，Chrome和Edge的融合，而旧的IE仍然不兼容。|1249380|另请参阅：https://github.com/whatwg/compat/issues/5|1249381|entityMap|0|LINK|mutability|MUTABLE|url|https://bugzilla.mozilla.org/show_bug.cgi?id=264412|1|http://rocallahan.github.io/innerText-spec/|2|https://github.com/whatwg/html/issues/465|3|https://github.com/whatwg/compat/issues/5^0|0|9|X|1F|0|0|R|17|1|1Z|15|2|0|0|5|15|3|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|L|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|U]]|V|$5|O|P|Q|E|$R|W]]|X|$5|O|P|Q|E|$R|Y]]]]

<code>innerText</code> has been added to Firefox and should be available in the FF45 release: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=264412" rel="noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=264412</a>

A draft spec has been written and is expected to be incorporated into the HTML living standard in the future: <a href="http://rocallahan.github.io/innerText-spec/" rel="noreferrer">http://rocallahan.github.io/innerText-spec/</a>, <a href="https://github.com/whatwg/html/issues/465" rel="noreferrer">https://github.com/whatwg/html/issues/465</a>

Note that currently the Firefox, Chrome and IE implementations are all incompatible. Going forward, we can probably expect Firefox, Chrome and Edge to converge while old IE remains incompatible.

See also: <a href="https://github.com/whatwg/compat/issues/5" rel="noreferrer">https://github.com/whatwg/compat/issues/5</a>

blocks|key|1463837|text|这是我使用innerText、textContent、innerHTML和value的经验：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1463838|//+elem.innerText+=+changeVal;++//+works+on+ie+but+not+on+ff+or+ch
//+elem.setAttribute("innerText",+changeVal);+//+works+on+ie+but+not+ff+or+ch
//+elem.textContent+=+changeVal;++//+works+on+ie+but+not+ff+or+ch
//+elem.setAttribute("textContent",+changeVal);++//+does+not+work+on+ie+ff+or+ch
//+elem.innerHTML+=+changeVal;++//+ie+causes+error+-+doesn't+work+in+ff+or+ch
//+elem.setAttribute("innerHTML",+changeVal);+//ie+causes+error+doesn't+work+in+ff+or+ch
+++elem.value+=+changeVal;+//+works+in+ie+and+ff+--+see+note+2+on+ch
//+elem.setAttribute("value",+changeVal);+//+ie+works;+see+note+1+on+ff+and+note+2+on+ch|code-block|syntax|javascript|1463839|ie+=+internet+explorer，ff+=+firefox，ch+=+google+chrome。注1:+ff工作，直到用退格键删除值之后-请参阅上面Ray+Vega的注释。注2:在chrome中工作-更新后，它是不变的，然后你点击离开，然后点击返回到字段中，值就会出现。其中最好的是elem.value+=+changeVal；我在上面没有注释掉它。|1463840|entityMap^0|5|9|F|B|R|9|0|0|44|M|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

This has been my experience with <code>innerText</code>, <code>textContent</code>, <code>innerHTML</code>, and value:

<pre><code>// elem.innerText = changeVal; // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal; // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal); // does not work on ie ff or ch
// elem.innerHTML = changeVal; // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
 elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch
</code></pre>

ie = internet explorer, ff = firefox, ch = google chrome.
note 1: ff works until after value is deleted with backspace - see note by Ray Vega above.
note 2: works somewhat in chrome - after update it is unchanged then you click away and click back into the field and the value appears.
The best of the lot is <code>elem.value = changeVal</code>; which I did not comment out above.

blocks|key|1249293|text|像这样的怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1249294|//$elem+is+the+jQuery+object+passed+along.

var+$currentText+=+$elem.context.firstChild.data.toUpperCase();|code-block|syntax|javascript|1249295|**我需要让我的字母大写。|1249296|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What about something like this?

<pre><code>//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();
</code></pre>

** I needed to make mine uppercase.

blocks|key|1463876|text|在这里找到这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1463877||code-block|syntax|javascript|1463878|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

found this here:

<pre><code>&lt;!--[if lte IE 8]&gt;
 &lt;script type="text/javascript"&gt;
 if (Object.defineProperty &amp;&amp; Object.getOwnPropertyDescriptor &amp;&amp;
 !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
 (function() {
 var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
 Object.defineProperty(Element.prototype, "textContent",
 { // It won't work if you just drop in innerText.get
 // and innerText.set or the whole descriptor.
 get : function() {
 return innerText.get.call(this)
 },
 set : function(x) {
 return innerText.set.call(this, x)
 }
 }
 );
 })();
 &lt;/script&gt;
&lt;![endif]--&gt;
</code></pre>

blocks|key|1463977|text|还可以在其他浏览器中模拟innerText行为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1463978|+if+(((typeof+window.HTMLElement)+!==+"undefined")+&&+((typeof+HTMLElement.prototype.__defineGetter__)+!==+"undefined"))+{
+++++HTMLElement.prototype.__defineGetter__("innerText",+function+()+{
+++++++++if+(this.textContent)+{
+++++++++++++return+this.textContent;
+++++++++}+else+{
+++++++++++++var+r+=+this.ownerDocument.createRange();
+++++++++++++r.selectNodeContents(this);
+++++++++++++return+r.toString();
+++++++++}
+++++});
+++++HTMLElement.prototype.__defineSetter__("innerText",+function+(str)+{
+++++++++if+(this.textContent)+{
+++++++++++++this.textContent+=+str;
+++++++++}+else+{
+++++++++++++this.innerHTML+=+str.replace(/&/g,+'&amp;').replace(/>/g,+'&gt;').replace(/</g,+'&lt;').replace(/\n/g,+"<br+/>\n");
+++++++++}
+++++});
+}|code-block|syntax|javascript|1463979|entityMap^0|C|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

It's also possible to emulate <code>innerText</code> behavior in other browsers:

<pre><code> if (((typeof window.HTMLElement) !== "undefined") &amp;&amp; ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
 HTMLElement.prototype.__defineGetter__("innerText", function () {
 if (this.textContent) {
 return this.textContent;
 } else {
 var r = this.ownerDocument.createRange();
 r.selectNodeContents(this);
 return r.toString();
 }
 });
 HTMLElement.prototype.__defineSetter__("innerText", function (str) {
 if (this.textContent) {
 this.textContent = str;
 } else {
 this.innerHTML = str.replace(/&amp;/g, '&amp;amp;').replace(/&gt;/g, '&amp;gt;').replace(/&lt;/g, '&amp;lt;').replace(/\n/g, "&lt;br /&gt;\n");
 }
 });
 }
</code></pre>

I have some JavaScript code that works in IE containing the following:

<pre><code>myElement.innerText = "foo";
</code></pre>

However, it seems that the 'innerText' property does not work in Firefox. Is there some Firefox equivalent? Or is there a more generic, cross browser property that can be used?

'innerText' works in IE, but not in Firefox

我有一些在IE中工作的JavaScript代码，其中包含以下内容：myElement.innerText = "foo";然而，似乎'innerText‘属性在火狐中不起作用。有没有与Firefox类似的东西？或者有没有更通用的、跨浏览器的属性可以使用？

问“innerText”可以在IE中使用，但不能在火狐中使用
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问“innerText”可以在IE中使用，但不能在火狐中使用EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问“innerText”可以在IE中使用，但不能在火狐中使用
EN