how to add a h1 inside a div using javascript

Question

I'm writing a HTML where I want to populate a h1 using Javascript . Here I'm able to populate text, but not the h1 . Below is my code.

function getTheIncident(keyWord, text) {
    showTheDiv();
    console.log(keyWord + "\t" + text);

    var e = document.getElementById('textResult');
    e.innerHTML = text.replace('\^', '\'');
}

and this gives me the output as shown in the picture below.

MY aim is to add a h1 with content as Description . Basically like

<h1>Description</h1>

just above A procurement order has been placed for a RAM with 128 Gig

please let me know on how can I do this.

Answer 1

 var h1= document.createElement('H1');
   h1.innerHTML = "Description";

now add this element to a particular node you want

Answer 2

Just wrap the code to be added as HTML into an h1 :

function getTheIncident(keyWord, text) {
    showTheDiv();
    console.log(keyWord + "\t" + text);

    var e = document.getElementById('textResult');
    e.innerHTML = "<h1>" + text.replace('\^', '\'') + "</h1>";
}

Answer 3

https://fiddle.jshell.net/LnkfLrev/1/ Something like this? you can use document.getElementById('placeholder').innerHTML = text; to set the text of you h1 element

EDIT:

https://fiddle.jshell.net/LnkfLrev/2/

Sorry, I did not quiet get you question. I updated the fiddle so it works as an anwer

I created an H1 element with var h = document.createElement("H1");

then i set the Text and add it to the body

  h.innerHTML = text;
  document.body.appendChild(h);

hope this helps now

Answer 4

Create your tag by using createElement() , then prepend() it to your container where you want to have on first. Check below snippet for reference.

 var h1Tag = document.createElement('H1'); h1Tag.innerHTML = "Your Title"; $('.output').prepend(h1Tag);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="output"> This div contains the output.. </div>