HTML/Javascript contenu Changer div

117

J'ai simplement le code HTML avec javascript, il ressemble à:HTML/Javascript contenu Changer 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>

Je voulais juste être le contenu de pouvoir changer div (c'est html interne) avec la sélection d'un des « A » ou "B" boutons radio, mais div # contenu n'a pas d'attribut javascript "valeur", donc je demande comment cela peut être fait.

Source

2010-03-31 Rob

277

En supposant que vous n'utilisiez pas jQuery ou une autre bibliothèque qui facilite ce genre de chose pour vous, vous pouvez simplement utiliser la propriété innerHTML de l'élément.

document.getElementById("content").innerHTML = "whatever";

Source

2010-03-31 15:19:52 Syntactic

Sur une note côté, 'document.getElementById ("contenu"). InnerText =" gras? ";' se comportera différemment, et parfois très utilement, à 'document.getElementById (" content "). InnerHTML =" texte en gras? ";' – Isaac

+18

S'il vous plaît utiliser 'innerHTML' plutôt que' innerText' et 'textContent' parce que' innerHTML' est compatible avec tous les navigateurs –

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

Source

2015-04-15 20:47:25

Merci pour cela essayait d'utiliser replace_html mais cela semblait résoudre mon problème. –

+13

Utiliser jQuery ... 5 ans de retard, ne rien expliquer et utiliser la technologie non requise sans l'indiquer ... Encore: 13 upvotes Je ne comprends pas SO – jabujavi

obtenir l'ID de la div dont le contenu que vous souhaitez modifier puis attribuez-lui le texte ci-dessous:

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

Source

2016-01-07 13:47:37

Bienvenue dans Stackoverflow! Fournir un peu d'explication lorsque vous écrivez du code dans votre réponse est beaucoup plus utile que le code. –

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

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

Code en direct

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

Source

2017-11-16 22:40:34

HTML/Javascript contenu Changer div

Répondre

Questions connexes