javascript - entre - innerhtml php
Diferencia entre internalText y innerHTML (7)
¿Cuál es la diferencia entre el valor de innerHTML
, innerText
y childNodes[].value
En JavaScript?
En palabras simples:
-
innerText
mostrará el valor tal como está e ignorará cualquier formatoHTML
que pueda incluirse. -
innerHTML
mostrará el valor y aplicará cualquier formatoHTML
.
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
.
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
aplicainnerText
text-transform
ywhite-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>
InnerText
propiedad InnerText
html codifica el contenido, convirtiendo <p>
en <p>
, etc. Si desea insertar etiquetas HTML, necesita usar InnerHTML
.
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.
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.
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);