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

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

• javascript
• html

Share Improve this question Follow edited Feb 11, 2016 at 20:54 Urs 5,13277 gold badges5959 silver badges125125 bronze badges asked Feb 11, 2016 at 20:17 ShniperShniper 85411 gold badge1010 silver badges3434 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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!";

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

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

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

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

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