Select an html element created with JS in JS

Question

I need to create a h1 element using JavaScript and then add a content to that h1. This is what I tried:

<div id="time">
</div>
<script>
  var h1 = document.getElementById("time").createElement("h1");
  h1.id= "timeh1";
  document.getElementById("timeh1").innerHTML = "Good Afternoon!";
</script>

and

<div id="time>
</div>
<script>
  document.getElementById("time").createElement("h1");
  document.getElementByTagName("h1")[0].setAttribute("id", "time-h1");
  document.getElementById("time-h1").innerHTML = "Good Afternoon!";
</script>

and

document.getElementById("time").createElement("h1").innerHTML = "Good Afternoon!";

jered · Accepted Answer · 2016-02-11T21:25:16.157

3

You can't use document.getElementById() to get an element unless it has been added to the DOM, which it hasn't been in any of your examples. That being said, you don't need to add the element to the DOM to change its innerHTML, since you already have a reference to it in JS by virtue of creating it.

Either do this:

var h1 = document.createElement("h1");
h1.id= "timeh1";
h1.innerHTML = "Good Afternoon!";

Or this:

var h1 = document.createElement("h1");
h1.id= "timeh1";
document.getElementById("time").appendChild(h1);
document.getElementById("timeh1").innerHTML = "Good Afternoon!";

edited Feb 11 '16 at 21:25

answered Feb 11 '16 at 20:27

jered

11,220
2
23
34

So I was pretty much over complicating it. Thanks – Shniper Feb 11 '16 at 20:41
1

You may wish to test first: `createElement` is a method of `document`, not HTML element nodes. – traktor Feb 11 '16 at 20:49
Good point, I just copied his code and added some without checking it over too closely. – jered Feb 11 '16 at 21:25

score 2 · Answer 2 · answered Feb 11 '16 at 20:23

2

Here I am creating the element, then setting the text.

From there you can append the new element to your 'time' div.

var h1 = document.createElement('h1');
h1.innerHtml = "Good Afternoon!";

document.getElementById('time').appendChild(h1);

answered Feb 11 '16 at 20:23

IrkenInvader

4,030
1
12
23

If you want to replace existing content of #time, you can [set its innerHTML to "" (null string) first](http://stackoverflow.com/questions/4991098/replacing-all-children-of-a-htmlelement). – traktor Feb 11 '16 at 20:41

Nikita Kurtin · Answer 3 · 2016-02-12T09:27:37.693

use appendChild method to add created h1 to particular element at the document. For example to body like this:

var h1 = document.createElement("h1");
h1.id= "timeh1";
h1.textContent="Good afternoon";
document.body.appendChild(h1);//append dynamically created h1 at the end of the body

Extra tip: for this case .textContent is better instead of innerHTML. since adding content is only textual. Here is a good reference for usage of this property: textContent

score 1 · Answer 4 · answered Feb 11 '16 at 20:26

1

You have to add it to the DOM before you can use getElementById to find it.

var b = document.createElement('button');
document.body.appendChild(b);

answered Feb 11 '16 at 20:26

Failwyn

767
8
22

score 1 · Answer 5 · answered Feb 11 '16 at 20:27

1

You need to create your element first:

var h1 = document.createElement("h1");
h1.innerHTML = "Good Afternoon!";

Then, after the h1 element is created, you can append it to your div:

document.getElementById("time").appendChild(h1);

answered Feb 11 '16 at 20:27

jeerbl

7,537
5
25
39

score 0 · Answer 6 · answered Feb 11 '16 at 20:59

You could create and add the header using innerHTML markup:

document.getElmentById("time").innerHTML = "<h1>Good Afternoon!</h1>";

Or use document.createElement to create the header node, insert its content using innerHTML (say) and insert it into the DOM.

var h1 = document.createElement("h1");
h1.innerHTML =  "Godd Afternoon!";
var container = document.getElementById("time");
container.innerHTML = "";  // reset contents of #time div to nothing
container.appendChild(h1);

Resetting the contents of the div works to replace existing content (if there is none, the reset is not required).

Select an html element created with JS in JS

6 Answers6