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

다음을 포함하는 IE에서 작동하는 JavaScript 코드가 있습니다.

myElement.innerText = "foo";

그러나 Firefox에서 'innerText'속성이 작동하지 않는 것 같습니다. Firefox에 상응하는 것이 있습니까? 아니면 더 일반적인 크로스 브라우저 속성을 사용할 수 있습니까?

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

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

업데이트 : 모든 차이점을 자세히 설명 하는 블로그 게시물을 작성했습니다 .

Firefox는 W3C 표준을 사용 Node::textContent하지만 그 동작은 MSHTML 소유의 동작과 약간 다릅니다 innerText( 오랫 동안 수십 가지 다른 MSHTML 기능 중에서 Opera에 의해 복사 됨).

우선, textContent공백 표현은 innerText하나 와 다릅니다 . 둘째, 더 중요한 것은 textContent 모든 SCRIPT 태그 내용 을 포함하지만 innerText는 포함하지 않습니다.

표준 구현 외에 - 그냥, 오페라를 즐겁게하고 더 일을 만들기 위해 textContent- 또한 MSHTML의를 추가하기로 결정 innerText 하지만이 역할을 변경textContent - 즉, 스크립트 내용을 포함하여 (사실, 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

마지막으로 Safari 2.x에는 버그 innerText구현이 있습니다. Safari에서 innerText요소가 style.display == "none"문서 를 통해 숨겨 지거나 (연결되지 않은) 경우에만 올바르게 작동합니다 . 그렇지 않으면 innerText빈 문자열이됩니다.

나는 textContent(이 결함을 해결하기 위해) 추상화 로 놀고 있었지만 다소 복잡 하다는 것이 밝혀졌습니다 .

가장 좋은 방법은 먼저 정확한 요구 사항을 정의 하고 거기서부터 따르는 것입니다. 가능한 innerHTML모든 textContent/ innerText편차를 처리하는 대신 요소에서 태그를 제거하는 것이 종종 가능합니다 .

물론 다른 가능성은 DOM 트리를 걷고 텍스트 노드를 재귀 적으로 수집하는 것입니다.

텍스트 내용 만 설정하고 검색하지 않아도되는 경우 모든 브라우저에서 사용할 수있는 간단한 DOM 버전이 있습니다. IE innerText 확장 또는 DOM Level 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 는 .text()모든 브라우저에서 사용할 수 있는 방법을 제공 합니다. 예를 들면 다음과 같습니다.

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

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

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

정말 간단한 자바 스크립트 줄은 모든 기본 브라우저에서 "taggy"텍스트를 얻을 수 있습니다.

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

이 Element::innerText속성 에는 Chrome에서 CSS 스타일 " " 로 숨겨진 텍스트가 포함 되지 않습니다display:none (글꼴 크기 : 0, 색상 : 투명도 및 기타 CSS 기술에 의해 마스크 된 내용도 삭제됨) 텍스트가 눈에 띄게 렌더링되지 않도록하는 몇 가지 다른 유사한 효과).

다른 CSS 속성도 고려됩니다.

• 먼저 내부 요소의 "display :"스타일이 구문 분석되어 블록 컨텐츠 (예 : 브라우저의 내장 스타일 시트에서 HTML 블록 요소의 기본값 인 "display : block")를 구분하는지 여부를 판별합니다. 자신의 CSS 스타일); 그렇다면 innerText 속성 값에 줄 바꿈이 삽입됩니다. textContent 속성에서는 발생하지 않습니다.
• 인라인 내용을 생성하는 CSS 속성도 고려됩니다. 예를 들어 <br \>인라인 개행을 생성하는 인라인 요소 는 innerText 값으로 개행을 생성합니다.
• "display : inline"스타일은 textContent 또는 innerText에 줄 바꿈을 일으키지 않습니다.
• "display : table"스타일은 테이블 주위와 테이블 행 사이에 줄 바꿈을 생성하지만 "display : table-cell"은 테이블 문자를 생성합니다.
• "position : absolute"속성 (display : block 또는 display : inline과 함께 사용하더라도 중요하지 않음)으로 인해 줄 바꿈이 삽입됩니다.
• 일부 브라우저에는 범위 사이에 단일 공간 분리가 포함됩니다.

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

마우스 선택을 사용하여 복사 / 붙여 넣기 작업을 수행하면 숨겨진 텍스트가 클립 보드에있는 일반 텍스트 형식으로 삭제되므로에있는 모든 내용은 포함되지 않고 안에 포함 된 내용 textContent만 포함 됩니다 innerText(위의 공백 / 개행 생성 후). .

그러면 Chrome에서 두 속성이 모두 지원되지만 내용이 다를 수 있습니다. 이전 브라우저는 여전히 textContent에 포함 된 것과 같은 모든 것을 여전히 innetText에 포함했습니다 (그러나 공백 / 줄 바꿈 생성과 관련한 동작은 일관성이 없었습니다).

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

이 jQuery 메소드는 <br />컨텐츠의 하위 요소 (예 :)로 인해 화면에 표시 될 수있는 추가 공백이나 줄 바꿈을 삽입하지 않는다는 점에주의해야 합니다.

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

CSS 트릭으로 숨겨진 텍스트는 일반적으로 HTML / CSS 파서 및 DOM 속성을 사용하여 주요 검색 엔진 (HTML 페이지의 CSS를 구문 분석하고 백그라운드에서 대비되는 색상이 아닌 텍스트를 무시 함)에 의해 무시됩니다. "innerText"는 최신 비주얼 브라우저에서와 동일합니다 (적어도이 보이지 않는 컨텐츠는 색인화되지 않으므로 숨겨진 텍스트는 페이지에 일부 키워드를 포함시켜 컨텐츠를 점검하도록하는 트릭으로 사용될 수 없습니다). 그러나이 숨겨진 텍스트는 추가 스타일과 스크립트를 제거하기 위해 전체 HTML 대신 "textContent"속성을 사용하여 결과 페이지 (결과에 포함 할 색인에서 페이지가 여전히 규정 된 경우)에 여전히 표시됩니다.

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

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

편집 (아래 주석에 Mark Amery에게 감사드립니다) : jQuery 와 같이 이러한 속성의 존재를 확인하는 데 코드가 의존하지 않는다는 합리적인 의심을 알고있는 경우에만이 방법을 사용하십시오 . 그러나 jQuery를 사용하는 경우 "text"함수를 사용하고 다른 답변에서 볼 수 있듯이 $ ( '# myElement'). text ( 'foo')를 수행하십시오.

innerTextFirefox에 추가되었으며 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 구현은 모두 호환되지 않습니다. 앞으로는 IE, Firefox, Chrome 및 Edge가 수렴 될 것으로 예상되지만 이전 IE는 호환되지 않습니다.

참조 : https://github.com/whatwg/compat/issues/5

이런 건 어때?

//$elem is the jQuery object passed along.

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

** 나는 대문자를 만들어야했다.

Firefox v45의 2016 년과 같이 innerText firefox에서 작동하며 http://caniuse.com/#search=innerText 의 지원을 살펴보십시오 .

이전 버전의 Firefox에서 작동하도록하려면 Firefox textContent를 더 잘 지원하지만 이전 IE 버전에서는 더 나쁘게 사용할 수 있습니다 . http://caniuse.com/#search=textContent

이것은 내 경험이었다 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

즉 = 인터넷 익스플로러, ff = 파이어 폭스, ch = 구글 크롬. 참고 1 : ff는 백 스페이스로 값을 삭제 한 후까지 작동합니다. 위의 Ray Vega 참고 참고 2 : 크롬에서 다소 작동합니다-업데이트 후에는 변경되지 않은 다음 클릭하고 필드를 다시 클릭하면 값이 나타납니다. 많은 것이 최고입니다 elem.value = changeVal; 나는 위에서 언급하지 않았습니다.

원래 게시물 아래의 댓글에서 다시 게시하면됩니다. innerHTML은 모든 브라우저에서 작동합니다. 고마워 stefita.

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