Creating div on button click with Javascript not working?

Question

I have a button in a webpage that is linked to a Javascript function, which creates a div as follows:

function creatediv(){
   var div = document.createElement('div');
   div.innerHTML = document.getElementById('innerhtmlbox').value;
   document.body.appendChild(div);
}

However, it is not working. Can anyone give me any advice?

First I'd just put alert("hey"); to make sure your button click is actually being registered... — Luke Twomey
– Luke Twomey, Commented Oct 15, 2015 at 17:33
is document.getElementById('innerhtml') a form element? if not, the result of value seems doubtful to me. — ZPiDER
– ZPiDER, Commented Oct 15, 2015 at 17:35
Protip: for the sake of readability don't name your element after a DOM attribute. It can get confusing. — Sterling Archer
– Sterling Archer, Commented Oct 15, 2015 at 17:35

leonheess · Accepted Answer · 2020-12-01 09:19:10Z

5

Try this:

function createDiv() {
  let div = document.createElement('div');
  div.innerText = document.getElementById('getText').innerText;
  document.body.appendChild(div);
}

<button onClick="createDiv()">Click me!</button>

<div id="getText" style="display: none;">
  INNER TEXT
</div>

edited Dec 1, 2020 at 9:19

leonheess

22.3k19 gold badges97 silver badges139 bronze badges

answered Oct 15, 2015 at 17:38

luispcosta

5522 gold badges6 silver badges21 bronze badges

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

3 Comments

adeneo Over a year ago

So what you're saying is that the function works, or did you actually change anything? Maybe an explanation!

luispcosta Over a year ago

This works. I may be wrong here, but I believe the .value function is to return the content of text fields, as in inputs, that's why I believe the code that OP was trying to execute didnt work

adeneo Over a year ago

But how do you know the OP isn't using an input to get the HTML that is to be used in the newly created element ?

Abhas Tandon · Accepted Answer · 2015-10-21 04:09:48Z

0

You need to use innerText

function creatediv() {
    var div = document.createElement('div');
    div.innerHTML = document.getElementById('innerhtml').textContent;
    document.body.appendChild(div);
}
creatediv();

http://jsfiddle.net/e8jn9pj5/3/

Or if you are populating it from button's value you may use .value as suggested by adeneo http://jsfiddle.net/t4c5yq24/

edited Oct 21, 2015 at 4:09

answered Oct 15, 2015 at 17:35

Abhas Tandon

1,88916 silver badges26 bronze badges

3 Comments

adeneo Over a year ago

Nope, you don't need to do that at all, innerHTML works just fine. Also, innerText is IE specific, and not cross-browser, today using textContent is probably a better idea, but again, it's not needed here.

Sandeep Nayak Over a year ago

Also, I dont think innerText is a standard

Abhas Tandon Over a year ago

I agree using textContent is better in case it is coming from content of another div. But yes most probably he is populating it from button's value so none of it is required.

Collectives™ on Stack Overflow

Creating div on button click with Javascript not working?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related