• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • VBA
  • About
You are here: Home / JavaScript / How to Create a New h1 Element With JavaScript

How to Create a New h1 Element With JavaScript

June 14, 2022 Leave a Comment

We can create a new h1 element with JavaScript by using the createElement() method along with the innerHTML property.

var newh1 = document.createElement("h1");
newh1.innerHTML = "This is a new h1 element."

And that’s it. Let’s go over creating a new h1 element with JavaScript and adding it to the DOM.


In this simple example, we will have some very basic HTML code containing some paragraphs. We will create a new h1 element using JavaScript and add it to our HTML above the paragraphs using the insertBefore() method.

Here is our HTML code:

<div id="div1">
  <p id="p1">We will insert a new h1 tag above this paragraph.</p>
  <p>This is some text in a paragraph tag.</p>
</div>

This is what our HTML will look like before we add the new h1 element.

We will insert a new h1 tag above this paragraph.

This is some text in a paragraph tag.

So we will use our JavaScript code from above along with the insertBefore() method to add a new h1 element to the div, #div1.

var newh1 = document.createElement("h1");
newh1.innerHTML = "This is a new h1 element"
var divToMoveTo = document.getElementById("div1");
divToMoveTo.insertBefore(newh1, divToMoveTo.children[0]);

We will insert a new h1 tag above this paragraph.

This is some text in a paragraph tag.

As we will see below, this can be done much faster and easier using jQuery.

Creating and Adding a New h1 Element With jQuery

If we use jQuery, we can very easily add a new h1 element with the use of the prepend() method.

Here is our same HTML setup:

<div id="div2">
  <p id="p1">We will insert a new h1 tag above this paragraph.</p>
  <p>This is some text in a paragraph tag.</p>
</div>

We will insert a new h1 tag above this paragraph.

This is some text in a paragraph tag.

And here is our new JavaScript code making use of the jQuery prepend() method.

$("#div2").prepend("<h1>This is a new h1 element</h1>");

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div2").prepend("<h1>This is a new h1 element</h1>");

We will insert a new h1 tag above this paragraph.

This is some text in a paragraph tag.

As you can see, this is much easier done with jQuery.

Hopefully this article has been useful for you to understand how you would create a new h1 element with JavaScript.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Get the Current Year
  • 2.  How to Clear an Input Field in JavaScript
  • 3.  Get the Size of a Set in JavaScript
  • 4.  Check That String Does Not Contain Character in JavaScript
  • 5.  JavaScript slice – How to Get a Substring From a String
  • 6.  JavaScript Trig – How to Use Trigonometric Functions in Javascript
  • 7.  JavaScript Infinite Loop
  • 8.  Using JavaScript to Declare Multiple Variables
  • 9.  Using JavaScript to Generate a Random Float Between 0 and 1
  • 10.  Math floor JavaScript – Using Math.floor() to Round Down to Floor

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

The Programming Expert is a compilation of hundreds of code snippets to help you find solutions to your problems in Python, JavaScript, PHP, HTML, SAS, and more.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2022 · The Programming Expert · About · Privacy Policy