HTML/Javascript zawartość zmiana div

117

mam prosty kod HTML z niektórych javascript, wygląda na to:HTML/Javascript zawartość zmiana 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>

Chciałem być zawartość w stanie zmienić div (jest to wewnętrzna html) z wybierając jedną z „A” lub przyciski opcji "B", ale zawartość div # nie ma atrybutu javascript "value", więc pytam, jak można to zrobić.

Źródło

2010-03-31 Rob

277

Zakładając, że nie używasz jQuery lub jakiejś innej biblioteki, która ułatwia to zadanie, możesz po prostu użyć właściwości innerHTML tego elementu.

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

Źródło

2010-03-31 15:19:52 Syntactic

Na marginesie, 'document.getElementById ("content"). InnerText =" tekst pogrubiony? ";' będzie zachowywać się inaczej, a czasem całkiem użytecznie, do "document.getElementById (" content "). InnerHTML =" pogrubiony tekst? ";' – Isaac

+18

"Użyj' innerHTML' zamiast 'innerText' i' textContent', ponieważ 'innerHTML' jest kompatybilny ze wszystkimi przeglądarkami –

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

Źródło

2015-04-15 20:47:25

Dzięki za to próbowałeś użyć replace_html, ale to wydawało się naprawić mój problem. –

+13

Korzystanie z jQuery ... 5 lat za późno, nie wyjaśniając niczego i nie używając wymaganej technologii bez wskazania tego ... Nadal: 13 przegranych Nie rozumiem SO – jabujavi

Get id div którego zawartość chcesz zmienić, a następnie przypisać tekst jak poniżej:

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

Źródło

2016-01-07 13:47:37

Witaj w Stackoverflow! Zapewniasz trochę wyjaśnienia podczas pisania kodu w swoim odpowiedź jest o wiele bardziej pomocna niż tylko kod. –

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

----------- ------ JS- kod ------------

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.

żywo Kod

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

Źródło

2017-11-16 22:40:34

HTML/Javascript zawartość zmiana div

Odpowiedz

Powiązane problemy