innerHTML para cambiar el contenido de un elemento html

Código Javascript

Alguna vez se preguntó cómo se puede cambiar el contenido de un elemento HTML? Tal vez le gustaría sustituir el texto de un párrafo para reflejar lo que un visitante ha seleccionado de una lista desplegable. Mediante la manipulación de InnerHtml de un elemento que va a ser capaz de cambiar el texto y HTML, como todo lo que quieras.

Cambiando Texto con innerHTML

Cada elemento HTML tiene una propiedad innerHTML que define tanto el código HTML y el texto que se produce entre la apertura de ese elemento y la etiqueta de cierre. Al cambiar innerHTML de un elemento después de una cierta interacción con el usuario, puede hacer mucho más interactivas las páginas.

Sin embargo, usando innerHTML requiere una cierta preparación, si usted quiere ser capaz de usarlo fácil y fiable. En primer lugar, usted debe dar el elemento que desee cambiar el id. Con ese id en el lugar que usted será capaz de utilizar la función getElementById, que funciona en todos los navegadores.

Después de tener esa configuración ahora se puede manipular el texto de un elemento. Para empezar, vamos a tratar de cambiar el texto dentro de una etiqueta en negrita.

Código JavaScript 




function changeText(){

	document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';

}

</script>

<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 

<input type='button' onclick='changeText()' value='Change Text'/>

Ahora ya sabe cómo cambiar el texto en cualquier elemento HTML, pero ¿qué hay de cambiar el texto en un elemento basado en la entrada del usuario? Pues bien, si combinamos el conocimiento anterior con una entrada de texto ...


Texto que se actualiza la base de datos del usuario

Mediante la adición de una entrada de texto, que podemos tomar para actualizar nuestro texto en negrita con lo que el usuario escribe en la introducción de texto. Nota: Hemos actualizado la función un poco y establecer el ID de boldStuff2.


JavaScript Code:


<script type="text/javascript">

function changeText2(){

	var userInput = document.getElementById('userInput').value;

	document.getElementById('boldStuff2').innerHTML = userInput;

}

</script>

<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 

<input type='text' id='userInput' value='Enter Text Here' />

<input type='button' onclick='changeText2()' value='Change Text'/>

Cambio de HTML con innerHTML

También puede insertar HTML en los elementos de la misma manera exacta. Digamos que no nos gustó el texto que se muestra en nuestro apartado y quería al día con un poco de color. El siguiente código se llevará el texto en negro de edad y que sea de color blanco brillante. Lo único que estamos haciendo aquí es diferente de insertar el lapso de elemento html para cambiar el color.
JavaScript Code:


 <script type="text/javascript">

function changeText3(){

	var oldHTML = document.getElementById('para').innerHTML;

	var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>";

	document.getElementById('para').innerHTML = newHTML;

}

</script>

<p id='para'>Welcome to the site <b id='boldStuff3'>dude</b> </p> 

<input type='button' onclick='changeText3()' value='Change Text'/>

Este es un ejemplo muy sencillo para cambiar el código HTML de un elemento. Todo lo que hicimos fue tomar el texto antiguo que estaba en la etiqueta de párrafo y de sonido envolvente en una etiqueta span para cambiar el color. Sin embargo, hay muchas más cosas que puede hacer por cambiar un elemento HTML, por lo que no se olvide de esta útil herramienta!

tags: pagina web html, jquery innerhtml, div innerhtml, dom innerhtml, innerhtml, inner html, jquery div innerhtml, innerhtml ie, innerhtml internet explorer