innerText vs innerHTML vs label vs text vs textContent vs outerText

Eu tenho uma lista suspensa que é preenchida por Javascript.

Ao decidir qual deveria ser o valor padrão a ser exibido no carregamento, percebi que as seguintes propriedades mostravam exatamente os mesmos valores:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

Minha própria pesquisa mostra testes de marcação de banco ou comparações entre alguns deles, mas não todos.

Posso usar meu próprio senso comum e escolher um ou outro, pois eles fornecem o mesmo resultado, mas estou preocupado que isso não seja uma boa ideia se os dados forem alterados.

Minhas descobertas são:

• innerText mostrará o valor como está e ignora qualquer formatação HTML que possa ser incluída
• innerHTML mostrará o valor e aplicará qualquer formatação HTML
• labelparece ser o mesmo que innerText, então não vejo a diferença
• textparece ser o mesmo que innerTexta versão abreviada do jQuery
• textContentaparece da mesma forma, innerTextmas mantém a formatação (como \n)
• outerText parece ser o mesmo que innerText

Minha pesquisa só pode me levar a um ponto em que eu só posso testar o que consigo pensar ou ler o que é publicado, mas alguém pode confirmar se minha pesquisa está correta e se há algo de especial labele outerText?

Do MDN :

O Internet Explorer introduziu o element.innerText. A intenção é praticamente a mesma [como textContent] com algumas diferenças:

• Observe que, enquanto textContent obtém o conteúdo de todos os elementos, incluindo <script>e <style>elementos, a propriedade específica do IE, na maior parte equivalente, innerText, não.

• innerText também está ciente do estilo e não retornará o texto dos elementos ocultos, enquanto o textContent o fará.

• Como o innerText está ciente do estilo CSS, ele acionará um reflow, enquanto o textContent não.

Portanto innerText, não incluirá texto oculto por CSS, mas textContentincluirá.

innerHTML retorna o HTML como o nome indica. Muitas vezes, para recuperar ou escrever texto dentro de um elemento, as pessoas usam innerHTML. textContent deve ser usado. Como o texto não é analisado como HTML, é provável que tenha um melhor desempenho. Além disso, isso evita um vetor de ataque XSS.

Caso você tenha perdido isso, deixe-me repeti-lo mais claramente: Do não usar .innerHTMLa menos que você pretende especificamente para inserir HTML dentro de um elemento e ter tomado as precauções necessárias para garantir que o HTML você está inserindo não pode conter conteúdo malicioso. Se você deseja apenas inserir texto, use .textContentou se precisar oferecer suporte ao IE8 e versões anteriores, use a detecção de recurso para desativar entre .textContente .innerText.

A principal razão pela qual existem tantas propriedades diferentes é que navegadores diferentes originalmente tinham nomes diferentes para essas propriedades e ainda não há suporte completo entre navegadores para todos eles. Se você estiver usando o jQuery, você deve se atentar, .text()pois ele foi projetado para suavizar as diferenças entre navegadores. *

Para alguns dos outros: outerHTMLé basicamente o mesmo que innerHTML, exceto pelo fato de incluir as tags de início e fim do elemento ao qual ele pertence. Não consigo encontrar muita descrição outerText. Eu acho que é provavelmente uma propriedade herdada obscura e deve ser evitada.

Uma lista suspensa compreende uma coleção de Optionobjetos; portanto, você deve usar a .textpropriedade para inspecionar a representação textual do elemento, ou seja,

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.textparece ser o mesmo, .innerTextmas a versão abreviada do JQuery

Isso não está correto; $(element).text()é a versão do jQuery, enquanto element.texta versão de acesso à propriedade.

Adendo à excelente resposta de JLRishe:

A razão pela qual innerText e outerText existem é por simetria com innerHTML e outerHTML. Isso se torna importante quando você atribui à propriedade.

Suponha que você tenha um elemento ecom código HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent não formatará (\ n)

Consulte a compatibilidade dos navegadores http://www.quirksmode.org/dom/html/ se você estiver direcionando navegadores específicos. Porque parece que todos eles têm seu próprio jeito de fazer as coisas. É por isso que é melhor usar o JQuery .text () ( http://api.jquery.com/text/ ) se você não quiser mexer.

texte labelremova espaços extras. Obtive esses resultados ao consultar opções em um menu suspenso:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"