javascript - entre - innerhtml php

Diferencia entre internalText y innerHTML

Question

¿Cuál es la diferencia entre el valor de innerHTML , innerText y childNodes[].value En JavaScript?

Answer 1

En palabras simples:

1. innerText mostrará el valor tal como está e ignorará cualquier formato HTML que pueda incluirse.
2. innerHTML mostrará el valor y aplicará cualquier formato HTML .

Answer 2

En términos de MutationObservers , la configuración de innerHTML genera una mutación childList debido a que los navegadores eliminan el nodo y luego agregan un nuevo nodo con el valor de innerHTML .

Si establece innerText , se genera una mutación de datos de characterData .

Answer 3

Los ejemplos a continuación se refieren al siguiente fragmento de código HTML:

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

El siguiente nodo hará referencia al nodo:

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

element.innerHTML

Establece u obtiene la sintaxis HTML que describe los descendientes del elemento.

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

Esto es parte de la especificación de análisis y serialización de DOM del W3C. Tenga en cuenta que es una propiedad de los objetos Element .

node.innerText

Establece u obtiene el texto entre las etiquetas de inicio y fin del objeto.

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

• innerText fue introducido por Microsoft y durante un tiempo no fue compatible con Firefox. En agosto de 2016, innerText fue adoptado por WHATWG y se agregó a Firefox en v45.
• innerText le ofrece una representación del texto que trata de hacer coincidir lo que representa el navegador, lo que significa:
  • innerText aplica innerText text-transform y white-space
  • innerText recorta el espacio en blanco entre líneas y agrega saltos de línea entre elementos
  • innerText no devolverá texto para elementos invisibles
• innerText devolverá textContent para elementos que nunca se representan como <style /> y `
• Propiedad de elementos del Node

node.textContent

Obtiene o establece el contenido de texto de un nodo y sus descendientes.

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

Si bien este es un estándar W3C , IE <9 no lo admite.

• No es consciente del estilo y, por lo tanto, devolverá el contenido oculto por CSS
• No desencadena un reflujo (por lo tanto más rendimiento)
• Propiedad de elementos del Node

node.value

Este depende del elemento al que te hayas dirigido. Para el ejemplo anterior, x devuelve un objeto HTMLDivElement , que no tiene una propiedad de value definida.

x.value // => null

Las etiquetas de entrada ( <input /> ), por ejemplo, definen una propiedad de value , que se refiere al "valor actual en el control".

<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 documentación :

Nota: para ciertos tipos de entrada, el valor devuelto puede no coincidir con el valor que el usuario ha ingresado. Por ejemplo, si el usuario ingresa un valor no numérico en un <input type="number"> , el valor devuelto podría ser una cadena vacía.

Guión de muestra

Aquí hay un ejemplo que muestra la salida para el HTML presentado anteriormente:

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 4

InnerText propiedad InnerText html codifica el contenido, convirtiendo <p> en <p> , etc. Si desea insertar etiquetas HTML, necesita usar InnerHTML .

Answer 5

InnerText solo devolverá el valor de texto de la página con cada elemento en una nueva línea en texto plano, mientras que innerHTML devolverá el contenido HTML de todo lo que está dentro de la etiqueta del body , y los childNodes devolverán una lista de nodos, como su nombre indica.

Answer 6

innerText embargo, a diferencia de innerText , innerHTML te permite trabajar con texto enriquecido en HTML y no codifica ni descodifica automáticamente el texto. En otras palabras, innerText recupera y establece el contenido de la etiqueta como texto plano, mientras que innerHTML recupera y establece el contenido en formato HTML.

Answer 7

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

Para refinarlo aún más y recuperar el valor Alec, por ejemplo, use otro .childNodes [1]

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