¿Cómo puedo cambiar el contenido div con JavaScript?
Tengo un código HTML simple con algo de JavaScript. Parece que:
<html>
<head>
<script type="text/javascript">
function changeDivContent() { // ...
};
</script>
</head>
<body>
<input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">
<div id="content"></div>
</body>
</html>Solo quería poder cambiar el contenido del div (es html interno) seleccionando uno de los botones de opción "A" o "B", pero div#content no tiene el atributo "valor" de JavaScript, así que pregunto cómo puede estar hecho.
Suponiendo que no estás usando jQuery o alguna otra biblioteca que te facilite este tipo de cosas, puedes usar la propiedad internalHTML del elemento.
document.getElementById("content").innerHTML = "whatever";
puede utilizar la siguiente función auxiliar:
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
¿Dónde #contentdebe haber un selector CSS válido?
Aquí hay un ejemplo de trabajo .
Además, hoy (01.07.2018) hice una comparación de velocidad para soluciones jquery y js puras (MacOs High Sierra 10.13.3 en Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 bits)):
document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever'); // jQuery
La solución jquery fue más lenta que la solución js pura: 69% en Firefox, 61% en Safari, 56% en Chrome. El navegador más rápido para js puro fue Firefox con 560 millones de operaciones por segundo, el segundo fue Safari con 426 millones y el más lento fue Chrome con 122 millones.
Entonces, los ganadores son js puro y firefox (¡3 veces más rápido que Chrome!)
Puedes probarlo en tu máquina: https://jsperf.com/js-jquery-html-content-change
