• 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
  • Ruby
  • 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 a Random Number Between 1 and 100
  • 2.  JavaScript String startsWith Method
  • 3.  JavaScript atan – Find Arctangent and Inverse Tangent of Number
  • 4.  Using JavaScript to Get the Page Title
  • 5.  Using JavaScript to Get Date Format in yyyy-mm-dd hh mm ss
  • 6.  Using JavaScript to Add Item to Array if it Does Not Exist
  • 7.  JavaScript Exponent – Exponentiate Numbers with Math.pow()
  • 8.  Using JavaScript to Replace Space With Dash
  • 9.  How to Convert a String to Lowercase In JavaScript
  • 10.  Swapping Images in JavaScript

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

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

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 © 2023 · The Programming Expert · About · Privacy Policy