Diferença entre innerText e innerHTML

Qual é a diferença entre innerHTML, innerTexte childNodes[].valueem JavaScript?

Ao contrário innerText, innerHTMLpermite trabalhar com rich text HTML e não codifica e decodifica automaticamente o texto. Em outras palavras, innerTextrecupera e define o conteúdo da tag como texto sem formatação, enquanto innerHTMLrecupera e define o conteúdo no formato HTML.

Os exemplos abaixo se referem ao seguinte snippet HTML:

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

O nó será referenciado pelo seguinte JavaScript:

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

element.innerHTML

Define ou obtém a sintaxe HTML que descreve os descendentes do elemento

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

Isso faz parte da especificação de análise e serialização de DOM do W3C . Observe que é uma propriedade dos Elementobjetos.

node.innerText

Define ou obtém o texto entre as tags de início e fim do objeto

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

• innerTextfoi introduzido pela Microsoft e por um tempo não foi suportado pelo Firefox. Em agosto de 2016, innerTextfoi adotado pelo WHATWG e adicionado ao Firefox na v45.
• innerText fornece uma representação sensível ao estilo do texto que tenta corresponder ao que é renderizado pelo navegador, o que significa:
  • innerTextaplica text-transforme white-spaceregras
  • innerText apara o espaço em branco entre as linhas e adiciona quebras de linha entre os itens
  • innerText não retornará texto para itens invisíveis
• innerTextretornará textContentpara elementos que nunca são renderizados como <style />e `
• Propriedade dos Nodeelementos

node.textContent

Obtém ou define o conteúdo do texto de um nó e seus descendentes.

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

Embora este seja um padrão W3C , ele não é suportado pelo IE <9.

• Não tem conhecimento de estilo e, portanto, retornará conteúdo oculto por CSS
• Não aciona um reflow (portanto, mais eficiente)
• Propriedade dos Nodeelementos

node.value

Este depende do elemento que você segmentou. Para o exemplo acima, xretorna um objeto HTMLDivElement , que não possui uma valuepropriedade definida.

x.value // => null

Tags de entrada ( <input />), por exemplo, definem uma valuepropriedade , que se refere ao "valor atual no controle".

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

Dos documentos :

Nota: para certos tipos de entrada, o valor retornado pode não corresponder ao valor digitado pelo usuário. Por exemplo, se o usuário digitar um valor não numérico em um <input type="number">, o valor retornado poderá ser uma sequência vazia.

Script de exemplo

Aqui está um exemplo que mostra a saída para o HTML apresentado acima:

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>

InnerTextA propriedade html codifica o conteúdo, passa <p>para <p>etc. Se você deseja inserir tags HTML, precisa usar InnerHTML.

Em palavras simples:

1. innerTextmostrará o valor como está e ignora qualquer HTMLformatação que possa ser incluída.
2. innerHTMLmostrará o valor e aplicará qualquer HTMLformatação.

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

Para refinar ainda mais e recuperar o valor Alec, por exemplo, use outro .childNodes [1]

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

Em termos de MutationObservers, a configuração innerHTMLgera uma childListmutação devido aos navegadores removendo o nó e adicionando um novo nó com o valor de innerHTML.

Se você definir innerText, uma characterDatamutação será gerada.

A única diferença entre innerTexte innerHTMLé que innerTextinsira a string como está no elemento, enquanto a innerHTMLexecuta como conteúdo 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>

InnerTextretornará apenas o valor de texto da página com cada elemento em uma nova linha em texto sem formatação, enquanto innerHTMLretornará o conteúdo HTML de tudo dentro da bodytag e childNodesretornará uma lista de nós, como o nome sugere.

A innerTextpropriedade retorna o valor real do texto de um elemento html enquanto innerHTMLretorna o HTML content. Exemplo abaixo:

var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);

<p id="hello"> Hello world 
</p>

para adicionar à lista, innerText manterá sua transformação de texto, innerHTML não