HTML / Javascript cambiar contenido div

208

Tengo un código HTML simple con algunos javascript, se ve así:

<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>
Expandir fragmento

Solo quería poder cambiar el contenido del div (es html interno) seleccionando uno de los botones de radio "A" o "B", pero el contenido div # no tiene el atributo "valor" de JavaScript, por lo que pregunto cómo puede ser hecho

javascript html Robar
fuente

Respuestas:

419

Suponiendo que no está utilizando jQuery o alguna otra biblioteca que le facilite este tipo de cosas, puede usar la propiedad innerHTML del elemento.

document.getElementById("content").innerHTML = "whatever";
Sintáctico
fuente
66
En una nota al margen, document.getElementById("content").innerText = "<b>bold text?</b>";se comportará de manera diferente, y a veces bastante útil, paradocument.getElementById("content").innerHTML = "<b>bold text?</b>";
Isaac
24
Utilice en innerHTMLlugar de innerTexty textContentporque innerHTMLes compatible con todos los navegadores.
Minh Triet
10
¡Advertencia! El uso de innerHTMLpuede conducir fácilmente a vulnerabilidades XSS cuando el valor proviene de una entrada no confiable. El uso de innerTextsiempre se recomienda por razones de seguridad y actualmente es compatible con todos los navegadores ( caniuse.com/#feat=innertext )
Mirko Conti
¿Puedo asignar otro elemento div a través de innerHTML, algo como document.getElementById ("foo"). innerHTML = <div> ... </div>
Fayaz
24 
$('#content').html('whatever');
Michael Sanchez
fuente
Gracias por esto estaba tratando de usar replace_html pero parecía solucionar mi problema. ¿Alguna idea de por qué?
Tall Paul
Esta es la solución jQuery.
Ivo
14

Obtenga la identificación de divcuyo contenido desea cambiar y luego asigne el texto de la siguiente manera: 

  var myDiv = document.getElementById("divId");
  myDiv.innerHTML = "Content To Show";
Daniel Mbeyah
fuente
2
¡Bienvenido a Stackoverflow! Brindar un poco de explicación cuando escribe código en su respuesta es mucho más útil que solo el código.
George Netu
10

puede usar la siguiente función auxiliar:

function content(divSelector, value) {
    document.querySelector(divSelector).innerHTML = value;
}

content('#content',"whatever");

Donde #contentdebe haber un selector CSS válido

Aquí está el ejemplo de trabajo .

Además: hoy (2018.07.01) hice una comparación de velocidad para jquery y soluciones 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

ingrese la descripción de la imagen aquí

La solución jquery fue más lenta que la solución js pura: 69% en firefox, 61% en safari, 56% en cromo. El navegador más rápido para js puro fue Firefox con 560 millones de operaciones por segundo, el segundo fue Safari 426M y el más lento fue Chrome 122M.

Entonces los ganadores son js puro y firefox (¡3 veces más rápido que Chrome!)

Puede probarlo en su máquina: https://jsperf.com/js-jquery-html-content-change

Kamil Kiełczewski
fuente
2 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="radio" name="radiobutton" value="A" onclick = "populateData(event)">
  <input type="radio" name="radiobutton" value="B" onclick = "populateData(event)">

    <div id="content"></div>
</body>
</html>

----------------- Código JS-------------------

var targetDiv = document.getElementById('content');
    var htmlContent = '';

    function populateData(event){
      switch(event.target.value){
        case 'A':{
         htmlContent = 'Content for A';
          break;
        }
        case 'B':{
          htmlContent = "content for B";
break;
        }
      }
      targetDiv.innerHTML = htmlContent;
    }
Step1: on click of the radio button it calls function populate data, with event (an object that has event details such as name of the element, value etc..);

Step2: I extracted the value through event.target.value and then simple switch will give me freedom to add custom text.

Código en vivo

https://jsbin.com/poreway/edit?html,js,output

Clíster Dmello
fuente
0

cambie a Haga clic onClick="changeDivContent(this)"e intente

function changeDivContent(btn) {
  content.innerHTML = btn.value
}

Mostrar fragmento de código

Kamil Kiełczewski
fuente