Kareem Nour Emam
¿Alguien puede decirme qué está haciendo innerHTML en javascript y darme un ejemplo de cómo puedo usarlo?
los innerHTML propiedad se utiliza para obtener o establecer el HTML contenido de una elemento nodo.
Ejemplo: http://jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert( content );
-
Y no es una propiedad mencionada en ningún estándar, pero es compatible con todos los principales navegadores.
– Félix Kling
2 de febrero de 2011 a las 20:21
-
-
Ah vale, no lo sabia 🙂
– Félix Kling
2 de febrero de 2011 a las 20:54
los innerHTML La propiedad es parte del Modelo de objetos de documento (DOM) que permite que el código Javascript manipule un sitio web que se muestra. Específicamente, permite leer y reemplazar todo dentro de un elemento DOM dado (etiqueta HTML).
Sin embargo, las manipulaciones DOM usando innerHTML son más lentos y más propensos a fallar que las manipulaciones basadas en objetos DOM individuales.
-
¿Cuál es la forma más efectiva de manipular contenidos textuales en un DOM?
– Iamlimo
2 de diciembre de 2019 a las 1:34
-
@Iamlimo: usando los nodos de texto reales: desarrollador.mozilla.org/en-US/docs/Web/API/Text
–Michael Borgwardt
2 de diciembre de 2019 a las 11:19
-
@MichaelBorgwardt, ¿puede dar un ejemplo del uso del nodo de texto? Creo que es text.wholeText:
Returns a DOMString containing the text of all Text nodes logically adjacent to this Node, concatenated in document order.AppendChild() también estaría bien, evitando innerHTML:document.getElementById('ags').appendChild(table)– Timo
25 de noviembre de 2020 a las 10:11
HTML interno es una propiedad de todo elemento. Le dice qué hay entre las etiquetas de inicio y finalización del elemento, y también le permite establecer el contenido del elemento.
propiedad describe un aspecto de un objeto. Es algo que tiene un objeto en oposición a algo que hace un objeto.
<p id="myParagraph">
This is my paragraph.
</p>
Puede seleccionar el párrafo y luego cambiar el valor de su HTML interno con el siguiente comando:
document.getElementById("myParagraph").innerHTML = "This is my paragraph";
Para comprender la propiedad innerHTML, primero debe pasar por los conceptos básicos del objeto javascript y HTML DOM (modelo de objeto de documento). Voy a intentar de explicar:
- Los objetos de JavaScript constan de propiedades y métodos.
- para renderizar documentos HTML, el navegador web crea un DOM, en DOM, cada elemento HTML se trata como un objeto JavaScript que tiene un conjunto de propiedades y métodos asociados.
Ahora llegando a su pregunta:
Código HTML:
<p id= "myPara"> We love to Code.</p>
Código JavaScript:
alert(document.getElementById("myPara").innerHTML);
aquí, document.getElementById(“myPara”) devolverá nuestro elemento html como un objeto javascript que tiene una propiedad predefinida innerHTML. La propiedad innerHTML contiene el contenido de la etiqueta HTML.
Espero que esto ayude.
Puede ejecutar el siguiente código HTML en su navegador para entenderlo:
<html>
<body>
<p id= "myPara"> We love to Code.</p>
<script>
alert(document.getElementById("myPara").innerHTML);
</script>
</body>
</html>
Cada elemento HTML tiene una propiedad innerHTML que define tanto el código HTML como el texto que aparece entre la etiqueta de apertura y cierre de ese elemento. Al cambiar el HTML interno de un elemento después de alguna interacción del usuario, puede crear páginas mucho más interactivas.
Sin embargo, usar innerHTML requiere cierta preparación si desea poder usarlo de manera fácil y confiable. Primero, debe darle al elemento que desea cambiar una identificación. Con esa identificación en su lugar, podrá usar la función getElementById, que funciona en todos los navegadores.
Glicerina
Puede recopilar o establecer el contenido de una etiqueta seleccionada.
Como una pseudoidea, es similar a tener muchas cajas dentro de una habitación e implica la idea “todo dentro”. que caja’
El innerHTML obtiene contenido según la identificación/nombre y los reemplaza.
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3>
</body>
</html>Cuando hace clic en el botón, el contenido en h3 será reemplazado por el asignador de HTML interno, es decir, Fecha().
-
usando
.innerHTML = Date()no “buscas” nada–Nico Haase
15 de mayo de 2020 a las 6:42