How can I change div content with JavaScript?

Question

I have simple HTML code with some JavaScript. It looks like:

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

I just wanted to be able to change the div's content (it's inner html) with selecting one of "A" or "B" radio buttons, but div#content does not have javascript attribute "value", so I am asking how it can be done.

score 559 · Accepted Answer · answered Mar 31 '10 at 15:19

559

Assuming you're not using jQuery or some other library that makes this sort of thing easier for you, you can just use the element's innerHTML property.

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

answered Mar 31 '10 at 15:19

Syntactic

10,721
3
25
25

9

On a side note, `document.getElementById("content").innerText = "bold text?";` will behave differently, and sometimes quite usefully, to `document.getElementById("content").innerHTML = "bold text?";` – Isaac May 23 '13 at 09:51
29

Please use `innerHTML` rather than `innerText` and `textContent` because `innerHTML` is compatible to all browsers. – Minh Triet Jun 26 '13 at 01:59
29

**Warning!** the usage of `innerHTML` can easily lead to XSS vulnerabilities when the value comes from an untrusted input. The use of `innerText` is always recommended for security reasons and currently it is supported by all browsers (https://caniuse.com/#feat=innertext) – Mirko Conti Jun 12 '19 at 22:37
can I assign an other div element through innerHTML, something like document.getElementById("foo").innerHTML =
...
– Fayaz Jul 02 '19 at 16:04

score 31 · Answer 2 · edited Feb 03 '23 at 06:38

31

Using jQuery:

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

edited Feb 03 '23 at 06:38

Himanshu

31,810
31
111
133

answered Apr 15 '15 at 20:47

Michael Sanchez

505
4
3

Thanks for this was trying to use replace_html but this seemed to fix my issue. Any idea why? – Tall Paul May 13 '15 at 14:50
13

This is jQuery solution. – Ivo Dec 04 '19 at 11:29

score 18 · Answer 3 · edited Jan 13 '16 at 16:23

18

Get the id of the div whose content you want to change then assign the text as below:

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

edited Jan 13 '16 at 16:23

timss

9,982
4
34
56

answered Jan 07 '16 at 13:47

Daniel Mbeyah

297
3
5

3

Welcome to Stackoverflow! Providing a little bit of explanation when you write code in your answer is far more helpful than just the code. – George Netu Jan 07 '16 at 13:53

Kamil Kiełczewski · Answer 4 · 2018-07-01T18:22:21.950

you can use following helper function:

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

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

Where #content must be valid CSS selector

Here is working example.

Additionaly - today (2018.07.01) I made speed comparison for jquery and pure js solutions ( MacOs High Sierra 10.13.3 on Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit) ):

document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever');                            // jQuery

The jquery solution was slower than pure js solution: 69% on firefox, 61% on safari, 56% on chrome. The fastest browser for pure js was firefox with 560M operations per second, the second was safari 426M, and slowest was chrome 122M.

So the winners are pure js and firefox (3x faster than chrome!)

You can test it in your machine: https://jsperf.com/js-jquery-html-content-change

score 4 · Answer 5 · answered Apr 16 '19 at 03:59

change onClick to onClick="changeDivContent(this)" and try

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

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

<input type="radio" name="radiobutton" value="A" onClick="changeDivContent(this)">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent(this)">

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

score 2 · Answer 6 · answered Nov 16 '17 at 22:40

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

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 Code

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

How can I change div content with JavaScript?

6 Answers6

Linked

Related