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.

Syntactic · Accepted Answer · 2010-03-31 15:19:52Z

579

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, 2010 at 15:19

Syntactic

11k3 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mirko Conti Over a year ago

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 (caniuse.com/#feat=innertext)

Himanshu · Accepted Answer · 2023-02-03 06:38:45Z

30

Using jQuery:

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

edited Feb 3, 2023 at 6:38

Himanshu

32.8k32 gold badges117 silver badges137 bronze badges

answered Apr 15, 2015 at 20:47

Michael Sanchez

5194 silver badges3 bronze badges

2 Comments

Tall Paul Over a year ago

Thanks for this was trying to use replace_html but this seemed to fix my issue. Any idea why?

Ivo Over a year ago

This is jQuery solution.

Kamil Kiełczewski · Accepted Answer · 2018-07-01 18:22:21Z

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

Kamil Kiełczewski · Accepted Answer · 2019-04-16 03:59:42Z

4

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>

answered Apr 16, 2019 at 3:59

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

Clister Dmello · Accepted Answer · 2017-11-16 22:40:34Z

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

Collectives™ on Stack Overflow

How can I change div content with JavaScript?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Linked

Related