Différence entre innerText et innerHTML

Quelle est la différence entre innerHTML, innerTextet childNodes[].valueen JavaScript?

Contrairement à innerText, cependant, innerHTMLvous permet de travailler avec du texte riche HTML et ne pas encoder et décoder automatiquement le texte. En d'autres termes, innerTextrécupère et définit le contenu de la balise en texte brut, tandis que innerHTMLrécupère et définit le contenu au format HTML.

Les exemples ci-dessous font référence à l'extrait HTML suivant:

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

Le nœud sera référencé par le JavaScript suivant:

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

element.innerHTML

Définit ou obtient la syntaxe HTML décrivant les descendants de l'élément

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

Cela fait partie des spécifications d' analyse et de sérialisation DOM du W3C . Notez que c'est une propriété d' Elementobjets.

node.innerText

Définit ou récupère le texte entre les balises de début et de fin de l'objet

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

• innerTexta été introduit par Microsoft et n'a pas été pris en charge par Firefox pendant un certain temps. En août 2016, a innerTextété adopté par le WHATWG et a été ajouté à Firefox en v45.
• innerText vous donne une représentation sensible au style du texte qui essaie de correspondre à ce qui est rendu par le navigateur, cela signifie:
  • innerTexts'applique text-transformet white-spacerègles
  • innerText coupe l'espace blanc entre les lignes et ajoute des sauts de ligne entre les éléments
  • innerText ne renverra pas de texte pour les éléments invisibles
• innerTextretournera textContentpour les éléments qui ne sont jamais rendus comme <style />et `
• Propriété des Nodeéléments

node.textContent

Obtient ou définit le contenu textuel d'un nœud et de ses descendants.

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

Bien qu'il s'agisse d' une norme W3C , elle n'est pas prise en charge par IE <9.

• Ne connaît pas le style et renverra donc le contenu caché par CSS
• Ne déclenche pas de refusion (donc plus performant)
• Propriété des Nodeéléments

node.value

Celui-ci dépend de l'élément que vous avez ciblé. Pour l'exemple ci-dessus, xretourne un objet HTMLDivElement , qui n'a pas de valuepropriété définie.

x.value // => null

Les balises d'entrée ( <input />), par exemple, définissent une valuepropriété , qui fait référence à la "valeur actuelle dans le contrôle".

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

De la documentation :

Remarque: pour certains types d'entrée, la valeur renvoyée peut ne pas correspondre à la valeur entrée par l'utilisateur. Par exemple, si l'utilisateur entre une valeur non numérique dans un <input type="number">, la valeur renvoyée peut être une chaîne vide à la place.

Exemple de script

Voici un exemple qui montre la sortie pour le HTML présenté ci-dessus:

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>

InnerTextLa propriété html-encode le contenu, en se tournant <p>vers <p>, etc. Si vous souhaitez insérer des balises HTML, vous devez utiliser InnerHTML.

En termes simples:

1. innerTextaffichera la valeur telle quelle et ignore toute HTMLmise en forme pouvant être incluse.
2. innerHTMLaffichera la valeur et appliquera toute HTMLmise en forme.

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

Pour l'affiner davantage et récupérer la valeur Alec par exemple, utilisez un autre .childNodes [1]

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

En termes de MutationObservers, le paramètre innerHTMLgénère une childListmutation car les navigateurs suppriment le nœud, puis ajoutent un nouveau nœud avec la valeur de innerHTML.

Si vous définissez innerText, une characterDatamutation est générée.

La seule différence entre innerTextet innerHTMLest l' innerTextinsertion de la chaîne telle qu'elle est dans l'élément, tout innerHTMLen l'exécutant en tant que contenu 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>

InnerTextne renverra que la valeur de texte de la page avec chaque élément sur une nouvelle ligne en texte brut, tandis que innerHTMLrenverra le contenu HTML de tout ce qui se trouve à l'intérieur de la bodybalise et childNodesrenverra une liste de nœuds, comme son nom l'indique.

La innerTextpropriété renvoie la valeur textuelle réelle d'un élément html tandis que la innerHTMLrenvoie la HTML content. Exemple ci-dessous:

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>

pour ajouter à la liste, innerText gardera votre texte-transform, innerHTML ne sera pas