Differenza tra innerText e innerHTML

Qual è la differenza tra innerHTML , innerText e innerText childNodes[].value in JavaScript?

A differenza di innerText , tuttavia, innerHTML consente di lavorare con testo RTF HTML e non codifica e decodifica automaticamente il testo. In altre parole, innerText recupera e imposta il contenuto del tag come testo normale, mentre innerHTML recupera e imposta il contenuto in formato HTML.

Gli esempi seguenti si riferiscono al seguente frammento HTML:

 
Warning: This element contains code and strong language.

Il nodo sarà referenziato dal seguente codice JavaScript:

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

element.innerHTML

Imposta o ottiene la syntax HTML che descrive i discendenti dell’elemento

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

Questo fa parte delle specifiche del Parsing e Serialization DOM del W3C. Nota che è una proprietà degli oggetti Element .

node.innerText

Imposta o ottiene il testo tra i tag di inizio e di fine dell’object

 x.innerText // => "Warning: This element contains code and strong language." 
  • innerText stato introdotto da Microsoft e per un po ‘non è stato supportato da Firefox. Nell’agosto 2016, innerText stato adottato dal WHATWG ed è stato aggiunto a Firefox nella v45.
  • innerText offre una rappresentazione in stile del testo che cerca di far corrispondere ciò che viene visualizzato dal browser, ciò significa:
    • innerText applica innerText text-transform e white-space
    • innerText taglia lo spazio bianco tra le righe e aggiunge interruzioni di riga tra gli elementi
    • innerText non restituirà il testo per gli oggetti invisibili
  • innerText restituirà textContent per elementi che non vengono mai visualizzati come

    e `

  • Proprietà degli elementi del Node

node.textContent

Ottiene o imposta il contenuto del testo di un nodo e dei suoi discendenti.

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

Sebbene si tratti di uno standard W3C , non è supportato da IE <9.

  • Non è a conoscenza dello stile e pertanto restituirà il contenuto nascosto dai CSS
  • Non innesca un reflow (quindi più performante)
  • Proprietà degli elementi del Node

node.value

Questo dipende dall'elemento che hai preso di mira. Per l'esempio precedente, x restituisce un object HTMLDivElement , che non ha una proprietà value definita.

 x.value // => null 

I tag di input ( ), ad esempio, definiscono una proprietà value , che si riferisce al "valore corrente nel controllo".

   

Dai documenti :

Nota: per alcuni tipi di input il valore restituito potrebbe non corrispondere al valore inserito dall'utente. Ad esempio, se l'utente immette un valore non numerico in un , il valore restituito potrebbe invece essere una stringa vuota.

Script di esempio

Ecco un esempio che mostra l'output per l'HTML presentato sopra:

 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]); } 
 
Warning: This element contains code and strong language.

Proprietà InnerText html: codifica il contenuto, trasformando

in <p> , ecc. Se vuoi inserire tag HTML devi usare InnerHTML .

In parole semplici:

  1. innerText mostrerà il valore così com’è e ignora qualsiasi formattazione HTML che può essere inclusa.
  2. innerHTML mostrerà il valore e applicherà qualsiasi formattazione HTML .
 var element = document.getElementById("main"); var values = element.childNodes[1].innerText; alert('the value is:' + values); 

Ad esempio, per perfezionarlo e recuperare il valore Alec, utilizzare un altro .childNodes [1]

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

In termini di MutationObservers , l’impostazione innerHTML genera una mutazione childList dovuta al fatto che i browser rimuovono il nodo e quindi aggiungono un nuovo nodo con il valore di innerHTML .

Se si imposta innerText , viene generata una mutazione innerText .

InnerText restituirà solo il valore di testo della pagina con ogni elemento su una nuova riga in testo normale, mentre innerHTML restituirà il contenuto HTML di tutto all’interno del tag body e childNodes restituirà un elenco di nodes, come suggerisce il nome.