Creating HTML element via javascript not working

Question

I'm currently a newbie to javascript just started learning on how to create new DOM element using the javascript function document.createElement(). The problem is that I'm getting really confused by all these function.The code be low is what I'm trying to create

I'm getting confused on how to append these element to the element having the id "date". Here is what i've done so far

function createElements(){
 //creating <div class="divider"></div>
 var div = document.createElement('div');
 var attributeDivider= document.createAttribute('class');
 attributeDivider.value="divider";
 div.setAttributeNode(attributeDivider);
 //creating <div class="section"></div>
 var div2 = document.createElement('div');
 var attributeSection = document.createAttribute('class');
 attributeSection.value ="section";
 div2.setAttributeNode(attributeSection);
 //creating h5 
 var h5 = document.createElement('h5');
 var attributeH5 = document.createAttribute('id');
 attributeH5.value ="test";
 // creating stuff 
 var stuff = document.createElement('Stuff');
 // creating date
 var date = document.getElementById("date");
 
 date.appendChild(h5);
 
 
}

<!--This_is_where_I_need_to_append the created elements-->
   <p id="date">Date Created</p>
   
   
   <!--The elements that I need to create-->
   <div class="divider"></div>
   <div class="section">
   <h5>Section 1</h5>
   <p>Stuff</p>
   </div>

Could someone help me ?

You need to create the attribute of the element, not the dom so div2.id ="div2" — Ullas Hunka, Jun 13 '18 at 08:39
I recommend using the much simpler `Element.setAttribute` API instead of `document.createAttribute`. DOM Level 1, from 1998, is a strange, excessively verbose beast. This is why jQuery was invented and now we're on DOM Level 3. — Dai, Jun 13 '18 at 08:41

score 0 · Accepted Answer · answered Jun 13 '18 at 08:42

0

You were creating the elements, however, you were not adding them to the HTML.

Try following

function createElements() {
  //creating <div class="divider"></div>
  var div = document.createElement('div');
  var attributeDivider = document.createAttribute('class');
  attributeDivider.value = "divider";
  div.setAttributeNode(attributeDivider);
  
  //creating <div class="section"></div>
  var div2 = document.createElement('div');
  var attributeSection = document.createAttribute('class');
  attributeSection.value = "section";
  div2.setAttributeNode(attributeSection);
  
  // Appending section div to divider div
  div.appendChild(div2);
  
  //creating h5 
  var h5 = document.createElement('h5');
  // Adding content 
  h5.textContent = "Section 1";
  // Appending h5 to section div
  div2.appendChild(h5);
  
  // creating stuff 
  var stuff = document.createElement('Stuff');
  // Adding content
  stuff.textContent = "Stuff";
  // Appending stuff element to section div
  div2.appendChild(stuff);
  
  // Getting date element
  var date = document.getElementById("date");
  // Appending the structure created above
  date.appendChild(div);
}

createElements();

<p id="date">Date Created</p>

answered Jun 13 '18 at 08:42

Nikhil Aggarwal

28,197
4
43
59

Thank you for the response, I can see the logic clearly withing your code. But a strange thing happened when i run it. It is not showing in the html tag nor on the page itself. – Ignorant23 Jun 13 '18 at 08:48
I tried to put an alert message in the function, and it is alerting fine but the HTML element is not showing – Ignorant23 Jun 13 '18 at 08:49
@Ignorant23 - It is working fine in the code I have shared. It seems like you are doing something wrong. Can you replicate the issue somewhere for me to look at. – Nikhil Aggarwal Jun 13 '18 at 08:50
okay running the snippet the code that you provide definitely is working, it might be a bug in my codes. Thank you sir. – Ignorant23 Jun 13 '18 at 08:51
@Ignorant23 - Welcome mate :) – Nikhil Aggarwal Jun 13 '18 at 08:52

Creating HTML element via javascript not working

1 Answers1

Linked