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

Answer 1

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

• Shniper: So I was pretty much over complicating it. Thanks
• traktor: You may wish to test first: createElement is a method of document, not HTML element nodes.
• jered: Good point, I just copied his code and added some without checking it over too closely.

Answer 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);

• traktor: If you want to replace existing content of #time, you can set its innerHTML to "" (null string) first.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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