[javascript] innerText와 innerHTML의 차이점

JAVASCRIPT / 글쓴이

차이점은 무엇이며 innerHTML, innerText그리고 childNodes[].value자바 스크립트는?

답변

달리 innerText하지만, innerHTML당신이 HTML 서식있는 텍스트로 작업 할 수 있습니다 자동으로 인코딩 및 디코딩 텍스트를하지 않습니다. 즉, innerText태그의 내용을 일반 텍스트로 innerHTML검색하고 설정하는 반면 HTML 형식의 내용을 검색하고 설정합니다.

답변

아래 예제는 다음 HTML 스 니펫을 나타냅니다. 

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

노드는 다음 JavaScript로 참조됩니다.

var x = document.getElementById('test');

element.innerHTML

요소의 자손을 설명하는 HTML 구문을 설정하거나 가져옵니다.

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

이것은 W3C의 DOM 구문 분석 및 직렬화 사양 의 일부입니다 . Element객체 의 속성입니다 .

node.innerText

객체의 시작 태그와 종료 태그 사이에 텍스트를 설정하거나 가져옵니다.

x.innerText
// => "Warning: This element contains code and strong language."
  • innerTextMicrosoft에 의해 소개되었으며 Firefox에 의해 지원되지 않았습니다. 2016 년 8 월 , WHATWGinnerText 에서 채택하여 v45의 Firefox에 추가되었습니다.
  • innerText 브라우저가 렌더링 한 내용과 일치하는 텍스트를 스타일을 인식하고 표현하여 다음을 의미합니다.
    • innerText적용 text-transform및 white-space규칙
    • innerText 줄 사이에 공백을 제거하고 항목 사이에 줄 바꿈을 추가합니다
    • innerText 보이지 않는 항목에 대한 텍스트를 반환하지 않습니다
  • innerText반환 textContent처럼 렌더링되지 않습니다 요소 <style />‘와
  • Node요소의 속성

node.textContent

노드와 그 하위 항목의 텍스트 내용을 가져 오거나 설정합니다.

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

이것은 W3C 표준 이지만 IE <9에서는 지원되지 않습니다.

  • 스타일을 인식하지 못하므로 CSS로 숨겨진 컨텐츠를 리턴합니다.
  • 리플 로우를 트리거하지 않습니다 (따라서 성능이 향상됨)
  • Node요소의 속성

node.value

이것은 당신이 목표로 한 요소에 달려 있습니다. 위 예제의 경우 속성이 정의 되지 않은 HTMLDivElement 객체를 x반환합니다 .value

x.value // => null

<input />예를 들어 입력 태그 ( ) 는 “컨트롤의 현재 값”을 나타내는 속성을 정의합니다value .

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

로부터 문서 :

참고 : 특정 입력 유형의 경우 반환 된 값이 사용자가 입력 한 값과 일치하지 않을 수 있습니다. 예를 들어, 사용자가 숫자가 아닌 값을에 입력 <input type="number">하면 반환 된 값은 빈 문자열 일 수 있습니다.

샘플 스크립트

다음은 위에 제시된 HTML의 출력을 보여주는 예입니다.

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj;
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}
<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

스 니펫 확장

답변

InnerText속성 도는 내용을 HTML은-인코딩 <p>에 &lt;p&gt;당신은 당신이 사용할 필요가 HTML 태그를 삽입 할 경우 등 InnerHTML.

답변

간단히 말해서 :

  1. innerText값을 그대로 표시하고 HTML포함 할 수 있는 형식을 무시합니다 .
  2. innerHTML값을 표시하고 모든 HTML형식을 적용합니다 .

답변

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

예를 들어 더 세분화하고 Alec 값을 검색하려면 다른 .childNodes [1]를 사용하십시오.

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

답변

측면에서 MutationObservers, 설정 innerHTML생성 childList의한 브라우저 노드를 제거한 다음의 값에 새로운 노드를 추가로 돌연변이 innerHTML.

을 설정 innerText하면 characterData돌연변이가 생성됩니다.

답변

유일한 차이점 innerText및 innerHTML즉 innerText그것은 요소에 같이있는 동안, 삽입 문자열 innerHTML실행이 HTML 콘텐츠로.

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;
.name{
color:red;
}
<h3>Inner text below. It inject string as it is into the element.</h3>
<div id="innertext"></div>
<br />
<h3>Inner html below. It renders the string into the element and treat as part of html document.</h3>
<div id="innerhtml"></div>

스 니펫 확장