HTML/Javascript cambiar el contenido div

117

Tengo un simple código HTML con un poco de Javascript, que parece:HTML/Javascript cambiar el contenido div

<html> 

<head><script type="text/javascript">...</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>

Sólo quería que contentarse capaces cambio de div (es html interno) con la selección de uno de "A" o los botones de opción "B", pero el contenido div # no tiene el atributo "valor" de javascript, entonces estoy preguntando cómo se puede hacer.

Fuente

2010-03-31 Rob

277

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";

Fuente

2010-03-31 15:19:52 Syntactic

En una nota lateral, 'document.getElementById ("contenido"). InnerText =" texto en negrita? ";' se comportará de manera diferente, y a veces bastante útil, a 'document.getElementById (" content "). InnerHTML =" texto en negrita? ";' – Isaac

+18

Utilice 'innerHTML' en lugar de' innerText' y 'textContent' porque' innerHTML' es compatible con todos los navegadores. –

$('#content').html('whatever');

Fuente

2015-04-15 20:47:25

Gracias por tratar de usar replace_html pero esto pareció solucionar mi problema. ¿Alguna idea de por qué? –

+13

Usando jQuery ... 5 años de retraso, sin explicar nada y sin usar la tecnología requerida sin indicarlo ... Todavía: 13 upvotes. No entiendo SO – jabujavi

obtener el ID de la div cuyo contenido desea cambiar a continuación, asignar el texto de la siguiente manera:

var myDiv = document.getElementById("divId"); 
    myDiv.innerHTML = "Content To Show";

Fuente

2016-01-07 13:47:37

Bienvenido a Stackoverflow! Proporcionando un poco de explicación cuando escribes código en tu la respuesta es mucho más útil que solo el código. –

<!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.

Live Código

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

Fuente

2017-11-16 22:40:34

HTML/Javascript cambiar el contenido div

Respuesta

Cuestiones relacionadas