Differenza tra innerText e innerHTML

Qual è la differenza tra innerHTML, innerTexte childNodes[].valuein JavaScript?

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

Gli esempi seguenti si riferiscono al seguente frammento HTML:

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

Il nodo verrà referenziato dal seguente JavaScript:

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

element.innerHTML

Imposta o ottiene la sintassi HTML che descrive i discendenti dell'elemento

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

Questo fa parte delle specifiche di analisi e serializzazione DOM del W3C . Nota che è una proprietà degli Elementoggetti.

node.innerText

Imposta o ottiene il testo tra i tag di inizio e fine dell'oggetto

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 del 2016, è innerTextstato adottato da WHATWG ed è stato aggiunto a Firefox nella v45.
• innerText ti dà una rappresentazione attenta allo stile del testo che cerca di abbinare ciò che viene renderizzato dal browser, questo significa:
  • innerTextsi applica text-transforme white-spaceregole
  • innerText taglia lo spazio bianco tra le righe e aggiunge le interruzioni di riga tra gli elementi
  • innerText non restituirà testo per oggetti invisibili
• innerTexttornerà textContentper gli elementi che non sono mai resi come <style />e `
• Proprietà degli Nodeelementi

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 attiva un riflusso (quindi più performante)
• Proprietà degli Nodeelementi

node.value

Questo dipende dall'elemento che hai preso di mira. Per l'esempio precedente, xrestituisce un oggetto HTMLDivElement , che non ha una valueproprietà definita.

x.value // => null

I tag di input ( <input />), ad esempio, definiscono una valueproprietà , che si riferisce al "valore corrente nel controllo".

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

Dai documenti :

Nota: per alcuni tipi di input il valore restituito potrebbe non corrispondere al valore immesso dall'utente. Ad esempio, se l'utente immette un valore non numerico in un <input type="number">, il valore restituito potrebbe essere invece 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]);
}

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

InnerTextproprietà html-codifica il contenuto, passando <p>a <p>, ecc. Se si desidera inserire tag HTML è necessario utilizzare InnerHTML.

In parole semplici:

1. innerTextmostrerà il valore così com'è e ignora qualsiasi HTMLformattazione che può essere inclusa.
2. innerHTMLmostrerà il valore e applicherà qualsiasi HTMLformattazione.

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

Per perfezionarlo ulteriormente e recuperare ad esempio 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 innerHTMLgenera una childListmutazione dovuta al fatto che i browser rimuovono il nodo e quindi aggiungono un nuovo nodo con il valore di innerHTML.

Se si imposta innerText, characterDataviene generata una mutazione.

L'unica differenza tra innerTexte innerHTMLè che innerTextinserisce la stringa così com'è nell'elemento, mentre la innerHTMLesegue come contenuto 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>

InnerTextrestituirà solo il valore di testo della pagina con ogni elemento su una nuova riga in testo normale, mentre innerHTMLrestituirà il contenuto HTML di tutto ciò che è all'interno del bodytag e childNodesrestituirà un elenco di nodi, come suggerisce il nome.

La innerTextproprietà restituisce il valore di testo effettivo di un elemento html mentre innerHTMLrestituisce il valore HTML content. Esempio sotto:

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>

per aggiungere alla lista, innerText manterrà la tua trasformazione del testo, innerHTML non lo farà