Unable to createand append divs and spans dynamically

Question

I'm writing a HTML code that has a div say y and this is in my HTML body and there is a button. when user clicks on this button, I want to do the below.

1. Create another div (with class as smallBar)
2. Inside this div, I want to create 3 spans.
3. Add this(total smallBar) content to div y.

Here is my current code.

HTML

<div class="y" id="y">

</div>
<input type="button" onclick="createDiv()" value="click me" />

JS

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  var span1 = document.createElement("span");
  span1.className = "span1";
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span1");
  var span3 = document.createElement("span");
  span3.setAttribute("class", "span1");

  div.appendChild(span1);
  div.appendChild(span2);
  div.appendChild(span3);

  document.getElementById("y").innerHTML = div;
}

here when I click on the button, Instead of creating a div it is giving me message as [object HTMLDivElement]. please let me know where am I going wrong and how can I fix this.

Here is my fiddle https://jsfiddle.net/d9hg0vkk/

Thanks

Answer 1

You are using innerHTML instead you need to use appendChild()

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  var span1 = document.createElement("span");
  span1.className = "span1";
  span1.innerHTML="Spam1";
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span2");
  span2.innerHTML="Span2";
  var span3 = document.createElement("span");
  span3.setAttribute("class", "span3");
  span3.innerHTML="Span3";

  div.appendChild(span1);
  div.appendChild(span2);
  div.appendChild(span3);

  document.getElementById("y").appendChild(div);
}

<div class="y" id="y">

</div>
<input type="button" onclick="createDiv()" value="click me" />

P.S- InnerHTML gives/sets a String, representing the HTML content of an element. When you do document.getElementById("y").innerHTML = div, it takes it as a String and not as a Object and thus you see [object HTMLDivElement] in the div. Instead you can do it with innerHTML like this document.getElementById("y").innerHTML = div.outerHTML;

Read More about innerHTML

Answer 2

Should be

  document.getElementById("y").innerHTML = div.innerHTML;

You are assigning div element directly. Where as you should get it's innerHTML

https://jsfiddle.net/d9hg0vkk/2/

Once you click the button and inspect element and see. You see span's inside of your target div.

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  var span1 = document.createElement("span");
  span1.className = "span1";
  span1.textContent= "span1"
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span1");
  span2.textContent= "span2"
  var span3 = document.createElement("span");
  span3.setAttribute("class", "span1");
  span3.textContent= "span3"

  div.appendChild(span1);
  div.appendChild(span2);
  div.appendChild(span3);

  document.getElementById("y").innerHTML = div.innerHTML;
}

<div class="y" id="y">

</div>
<input type="button" onclick="createDiv()" value="click me" />

Or if you want to append whole div, you can try using appendChild as others pointed

document.getElementById("y").appendChild(div);