Différence entre innerText, innerHTML et valeur ?

Question

Quelle est la différence entre innerHTML , innerText et value en JavaScript ?

Answer 1

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 de l'initiative du W3C. Spécification de l'analyse syntaxique et de la sérialisation du DOM . Notez que c'est une propriété de Element objets.

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

• innerText a été introduit par Microsoft et a été pendant un certain temps non pris en charge par Firefox. En août 2016, innerText était adopté par le WHATWG et a été ajouté à Firefox dans la v45.
• innerText vous donne une représentation du texte qui tient compte du style et qui essaie de correspondre à ce qui est rendu par le navigateur :
  • innerText s'applique text-transform et white-space règles
  • innerText coupe les espaces blancs entre les lignes et ajoute des sauts de ligne entre les éléments
  • innerText ne renverra pas de texte pour les éléments invisibles
• innerText retournera textContent pour les éléments qui ne sont jamais rendus, comme <style /> et `
• Propriété de 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 que ce soit un Norme W3C il n'est pas supporté par IE < 9.

• N'est pas conscient de la stylisation et renverra donc le contenu caché par les CSS.
• Ne déclenche pas de reflux (donc plus performant)
• Propriété de Node éléments

node.value

Celle-ci dépend de l'élément que vous avez ciblé. Pour l'exemple ci-dessus, x renvoie un HTMLDivElement qui n'a pas d'objet value propriété définie.

x.value // => null

Balises d'entrée ( <input /> ), par exemple, faire définir un value propriété qui fait référence à la "valeur actuelle de la commande".

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

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

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>

Answer 2

Contrairement à innerText mais.., innerHTML vous permet de travailler avec du texte riche HTML et ne code et décode pas automatiquement le texte. En d'autres termes, innerText récupère et définit le contenu de la balise en tant que texte brut, alors que innerHTML récupère et définit le contenu au format HTML.

Answer 3

InnerText Le contenu est codé en html, ce qui transforme <p> à <p> etc. Si vous voulez insérer des balises HTML, vous devez utiliser InnerHTML .

Answer 4

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

Answer 5

innerHTML vous donne le DOM(balisage HTML) auxquels vous pouvez attacher des événements et faire d'autres choses comme vous pouvez le faire avec les balises HTML mais innerText vous donne le contenu (quel qu'il soit, par exemple une balise, un texte, etc. texte clair .

Et childNodes[].value est en fait childNodes[index].nodeValue qui vous donne la valeur de l'élément enfant d'un élément parent.