'innerText'는 IE에서는 동작하지만 Firefox에서는 동작하지 않습니다.

'innerText'는 IE에서는 동작하지만 Firefox에서는 동작하지 않습니다.

IE에서 동작하는 JavaScript 코드에는 다음과 같은 것이 포함되어 있습니다.

myElement.innerText = "foo";

하지만, '내부'는Firefox에서는 Text' 속성이 작동하지 않습니다.Firefox와 동등한 것이 있습니까?또는 보다 일반적인 크로스 브라우저 속성을 사용할 수 있습니까?

업데이트: 저는 모든 차이점에 대해 훨씬 더 자세히 블로그에 글을 썼습니다.

---

Firefox W3C를 합니다.Node::textContent 사양인 MSHTML과 은 '.innerText(오페라도 얼마 전에 다른 수십 개의 MSHTML 기능을 복사했습니다).

단......textContent으로 나타나다.innerText 더 중요한 것은, 째, ,, one, one, 요, 요, 요, 요, 요, 요, 요, onetextContent 는 모든 SCRIPT 태그 내용을 포함하지만 innerText는 포함하지 않습니다.

더 하기 - 구현 외에 오페라 - 오페라 - 오페라 - 오페라 - 오페라 - 오페라 - 오페라 네요textContent.- MSHTML - MSHTML 추 - - - - 。innerText SCRIPT의 내용을 포함하도록 변경했습니다(실제로,textContent ★★★★★★★★★★★★★★★★★」innerText오페라에서 같은 결과를 낳는 것 같습니다.을 이용하다

textContent입니다.Node ",innerText입니다.HTMLElement수 있다 '되돌릴 수 있다', '되돌릴 수 있다', '되돌릴 수 있다' textContent 아니다innerText다음 중 하나:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

2.에는 버그가 .innerText★★★★★★★★★★★★★★★★★★★★★★★★★★.innerText를 통해) 숨겨져 않은 합니다.style.display == "none" )도 ( ) 。 않으면, 「」가 됩니다.innerText빈 문자열이 됩니다.

는 지가 with with를 가지고 놀고 .textContent추상화(이러한 결점들을 회피하기 위해)하지만, 그것은 다소 복잡한 것으로 판명되었다.

먼저 정확한 요건을 정의하고 그 이후를 따르는 것이 좋습니다.대부분의 경우 단순히 태그만 떼어내는 것이 가능합니다.innerHTML( 가능한 것을 , 모든 것을 하는 textContent/innerText★★★★★★ 。

물론 다른 방법으로는 DOM 트리를 걷고 텍스트 노드를 재귀적으로 수집하는 방법이 있습니다.

Firefox는 W3C 호환 textContent 속성을 사용합니다.

Safari와 Opera도 이 자산을 지원한다고 생각합니다.

텍스트 내용만 설정하고 검색하지 않으면 브라우저 상에서 사용할 수 있는 간단한 DOM 버전이 있습니다. IE innerText 확장자 또는 DOM 레벨 3 Core textContent 속성은 필요하지 않습니다.

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

jQuery는 모든 브라우저에서 사용할 수 있는 메서드를 제공합니다.예를 들어 다음과 같습니다.

$('#myElement').text("Foo");

Prakash K의 답변에 따르면 Firefox는 innerText 속성을 지원하지 않습니다.따라서 사용자 에이전트가 이 속성을 지원하는지 여부를 테스트하고 다음과 같이 진행하면 됩니다.

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

Javascript의 정말 간단한 행은 모든 메인 브라우저에서 태그가 없는 텍스트를 얻을 수 있습니다.

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

에 주의:Element::innerText속성에는 CSS 스타일에 의해 숨겨진 텍스트가 포함되지 않습니다.display:noneGoogle Chrome에서는 (다른 CSS 테크놀로지(글꼴 크기:0, 색상:투명 등)에 의해 가려진 콘텐츠를 드롭합니다.)

기타 CSS 속성도 고려됩니다.

• 먼저 내부 요소의 "display:" 스타일은 블록 콘텐츠를 구분하는지 여부를 판단하기 위해 해석됩니다(예를 들어 "display:block"은 브라우저의 내장 스타일시트에 있는 HTML 블록 요소의 기본값이며 자신의 CSS 스타일에 의해 덮어쓰기되지 않은 동작입니다). 그렇게 되면 새로운 행이 innerText 속성의 값에 삽입됩니다.textContent 속성에서는 이 문제가 발생하지 않습니다.
• 를 들어 요소의 CSS 속성입니다.예를 들어 인라인 요소입니다.<br \>인라인 줄바꿈을 생성하면 innerText 값에도 줄바꿈이 생성됩니다.
• "display:inline" 스타일은 textContent 또는 innerText에 줄바꿈을 발생시키지 않습니다.
• "display:table" 스타일은 테이블 주변과 테이블 행 사이에 새 줄을 생성하지만 "display:table-cell"은 표 문자를 생성합니다.
• "position:absolute" 속성(표시:블록 또는 표시:인라인과 함께 사용됨)도 줄 바꿈을 삽입합니다.
• 일부 브라우저에서는 스팬 간에 공간을 1개씩 구분하여 사용할 수도 있습니다.

★★★★★★★★★★★★★★★★★.Element::textContent에는 적용된 CSS와는 독립적으로 내부 텍스트 요소의 모든 내용이 포함되어 있습니다.이 내용이 표시되지 않는 경우에도 마찬가지입니다.또한 textContent에는 추가 줄 바꿈이나 공백이 생성되지 않으며, 모든 스타일과 구조 및 인라인/블록 또는 내부 요소의 위치 유형을 무시합니다.

마우스 선택을 사용하여 복사/붙여넣기 작업을 수행하면 클립보드에 삽입된 일반 텍스트 형식의 숨겨진 텍스트가 폐기되므로 숨겨진 텍스트에 포함된 모든 텍스트가textContent, 단, 그 안에 있는 것만이innerText(위의 공백/새 행 생성 후).

두 속성은 Google Chrome에서 지원되지만 내용이 다를 수 있습니다.이전 브라우저는 아직 innet에 포함되어 있습니다.현재 textContent에 포함된 것과 같은 모든 내용을 텍스트로 표시합니다(단, 당시 공백/새 행 생성과 관련된 동작은 일관성이 없습니다).

jQuery는 $() 쿼리를 통해 반환되는 해석 요소에 추가된 ".text()" 메서드를 사용하여 브라우저 간의 이러한 불일치를 해결합니다.내부적으로는 HTML DOM을 조사하여 문제를 해결하고 "노드" 레벨로만 작업합니다.따라서 표준 textContent와 더 유사한 내용이 반환됩니다.

주의: 이 jQuery 메서드는 서브요소로 인해 화면에 표시될 수 있는 여분의 공백이나 줄 바꿈을 삽입하지 않습니다(예:<br />)를 참조해 주세요.

접근성을 위해 스크립트를 설계하고 점자 리더와의 통신에 사용되는 플러그인과 같은 비청각 렌더링을 위해 스타일시트를 해석하는 경우, 이 도구는 "display: none"으로 지정된 스팬에 추가되며 일반적으로 페이지에 포함된 특정 구두점 부호를 포함해야 하는 경우 textContent를 사용해야 합니다(예:위첨자/아래첨자)의 경우, 그렇지 않은 경우 innerText는 점자 리더에서 매우 혼란스러울 수 있습니다.

CSS 트릭에 의해 숨겨진 텍스트는 일반적으로 HTML/CSS 파서와 DOM 속성 "innerText"를 사용하여 주요 검색 엔진에 의해 무시됩니다(HTML 페이지의 CSS를 해석하고 배경에서 대조되는 색상에 있지 않은 텍스트도 무시됩니다).숨겨진 텍스트가 페이지에 포함된 일부 키워드를 강제로 체크하는 트릭으로 사용될 수 없도록 색인화되어 있습니다.그러나 이 숨겨진 텍스트는 결과 페이지에 표시됩니다(페이지가 결과에 포함되도록 인덱스에서 지정된 경우) 완전한 HTML 대신 "textContent" 속성을 사용하여 추가 스타일을 제거합니다.d 스크립트

이러한 두 가지 속성 중 하나에 일반 텍스트를 할당하면 내부 마크업과 적용된 스타일이 덮어쓰게 됩니다(할당된 요소만 유형, 속성 및 스타일을 유지하므로 두 속성 모두 동일한 내용을 포함합니다).그러나 일부 브라우저는 이제 innerText에 쓰기를 허용하지 않고 textContent 속성만 덮어쓸 수 있습니다(HTML 특수문자는 숫자 문자 참조를 사용하여 문자 그대로 표시되므로 이러한 속성에 쓸 때 HTML 마크업을 삽입할 수 없습니다).innerHTML양도 후의 재산innerText또는textContent.

myElement.innerText = myElement.textContent = "foo";

편집(아래 코멘트에 Mark Amery 덕분에):이 방법은 jQuery와 같이 이러한 속성의 존재를 체크하는 데 의존하는 코드가 없다는 것을 충분히 알고 있는 경우에만 사용하십시오.그러나 jQuery를 사용하는 경우에는 다른 답변과 같이 "text" 기능을 사용하여 $('#myElement').text('foo')를 수행합니다.

innerText는 Firefox에 추가되어 FF45 릴리즈에서 사용할 수 있습니다.https://bugzilla.mozilla.org/show_bug.cgi?id=264412

사양 초안이 작성되어 향후 HTML 생활표준에 포함될 예정입니다.http://rocallahan.github.io/innerText-spec/, https://github.com/whatwg/html/issues/465

현재 Firefox, Chrome 및 IE 구현은 모두 호환되지 않습니다.앞으로 Firefox, Chrome 및 Edge는 이전 IE와 호환되지 않는 상태로 통합될 것으로 예상됩니다.

참고 항목: https://github.com/whatwg/compat/issues/5

지금까지의 경험입니다.innerText,textContent,innerHTML, 및 값:

// 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

즉 = Internet Explorer, ff = Firefox, ch = google chrome입니다.주 1: ff는 백스페이스로 값이 삭제될 때까지 작동합니다. 위의 Ray Vega의 참고 사항을 참조하십시오.주 2: 크롬으로 동작합니다.업데이트 후 변경되지 않고 클릭 후 필드를 클릭하면 값이 나타납니다.그 중에서도 가장 좋은 것은elem.value = changeVal위에서 언급하지 않았다.

2016년 Firefox v45부터innerTextfirefox에서 동작합니다.http://caniuse.com/ #search=http://http://caniuse.com/Text 를 참조해 주세요.

이전 버전의 Firefox에서 작동하려면textContenthttp://caniuse.com/ #search=textContent는 Firefox에서는 더 잘 지원되지만 이전 IE 버전에서는 더 잘 지원되지 않습니다.

이런 건 어때?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** 나는 내 것을 대문자로 만들어야 했다.

원래 게시물 아래에 댓글을 다시 올렸을 뿐입니다.innerHTML은 모든 브라우저에서 작동합니다.고마워 스테피타

myElement.innerHTML = "foo";

여기서 찾을 수 있습니다.

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !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)
                }
              }
            );
          })();
    </script>
<![endif]-->

또한 에뮬레이션이 가능합니다.innerText동작:

 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");
         }
     });
 }

언급URL : https://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox