Insert a new h3 element before the first paragraph in the body using javascript

Question

I want to insert a new h3 element having my name before the first paragraph in the HTML only by using javascript. I do not want to edit the HTML file or the CSS file for it. I have tried this code in the javascript file

let h3e = document.createElement("h3");
h3e.textContent("Student Name");
document.body.insertBefore(h3e, document.body.firstChild);

But it is not working

let h3e = document.createElement("h3");
h3e.textContent("Student Name");
document.body.insertBefore(h3e, document.body.firstChild);

<body>
      <header>
        <h1>Bumblebee</h1>
      </header>

      <main>
        <h2>General description</h2>

        <figure><img src="bee1.jpg" />
          <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
          </figcaption>
        </figure>

        <p>Bumblebees vary in o about 40 mm longginger beast".</p>

          <h2>Distribution and habitat</h2>

    <p>Test data</p>
</body>

If you look in the dev console you will see an error. The error is that `h3e.textContent` is not a function. You should just assign to it rather than call it. i.e. `h3e.textContent ="Student Name";`. — Paul Rooney, Mar 22 '21 at 06:21
I want the "Student Name"to be shown before
Bumblebees vary in o about 40 mm longginger beast".
tag — Ankit Sharma, Mar 22 '21 at 06:31
You just need to find the paragraph node using `document.querySelector('p')` and insert before that. The unclosed
tag in your example might be causing issue though. — Paul Rooney, Mar 22 '21 at 06:47
var h3e = document.createElement("H3"); var t = document.createTextNode("Student Name"); h3e.appendChild(t); document.body.insertBefore(h3e, document.querySelector("main > p") ); query selector isnt working. — Ankit Sharma, Mar 22 '21 at 06:56

Paul Rooney · Answer 1 · 2021-03-25T05:12:20.010

To insert after the paragraph you need to call the insertBefore method on the immediate parent Node of the paragraph Node. So its not document you want to call it on but the main element. Note: in your example the main tag isn't closed. If you took away the main Node then you could use document.insertBefore as then document is the immediate parent of the paragraph.

So to do it with your above example, you could do it as shown below. I put in a time delay to show it before and after the element is inserted.

<html>
    <body>
        <header>
          <h1>Bumblebee</h1>
        </header>      
        <main>
          <h2>General description</h2>      
          <figure><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a8/Xylocopa_bee1.jpg/300px-Xylocopa_bee1.jpg" />
            <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
            </figcaption>
          </figure>      
          <p>Bumblebees vary in o about 40 mm longginger beast".</p>      
            <h2>Distribution and habitat</h2>
        </main>
      <p>Test data</p>
  </body>
  <script>
    setTimeout(() => {
        const h3e = document.createElement("h3");
        h3e.textContent ="Student Name";
        const mainElem = document.querySelector('main');
        const paragraph = mainElem.querySelector("p");
        mainElem.insertBefore(h3e, paragraph);
     }, 1000);
  </script>
</html>

You may want to look to the other answer wrt best practice for setting the text in the h3 node.

Another way to do it that is perhaps more robust is to call insertBefore on the parent of the paragraph node.

e.g.

paragraph.parentNode.insertBefore(h3e, paragraph);

Nguyễn Văn Phong · Answer 2 · 2021-03-22T07:26:50.243

Your problem is here

h3e.textContent("Student Name");

// Error msg: "Uncaught TypeError: h3e.textContent is not a function",

Change to

var t = document.createTextNode("Student Name");
h3e.appendChild(t);

Or as @Paul Rooney's comment:

h3e.textContent ="Student Name";

Full code & demo here:

var h3e = document.createElement("H3");
var t = document.createTextNode("Student Name");
h3e.appendChild(t);

document.body.insertBefore(h3e, document.body.firstChild);

<body>
      <header>
        <h1>Bumblebee</h1>
      </header>
      <main>
        <h2>General description</h2>
        <figure><img src="bee1.jpg" />
          <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
          </figcaption>
        </figure>
        <p>Bumblebees vary in o about 40 mm longginger beast".</p>
          <h2>Distribution and habitat</h2>
    <p>Test data</p>
</body>

Read this thread in more detail: TextNode or textContent?

score 0 · Answer 3 · answered Mar 22 '21 at 07:05

0

Just Simply Do like that

let p = document.getElementsByTagName('p')[0]
p.outerHTML = '<h3>Student Name</h3>' + p.outerHTML

answered Mar 22 '21 at 07:05

Zia ur Rehman

573
3
15

tried this let h3e = document.createElement("H3"); let t = document.createTextNode("Student Name"); h3e.appendChild(t); let ptag = document.getElementsByTagName('p'); document.body.insertBefore(h3e, ptag); – Ankit Sharma Mar 22 '21 at 07:13
Just copy above code and try in your browser conole – Zia ur Rehman Mar 22 '21 at 09:40

Insert a new h3 element before the first paragraph in the body using javascript

3 Answers3