Unable to create and add divs and dynamically dynamically

Question

I am writing HTML code that has a div that says y, and that is in my body of HTML, and there is a button. when the user clicks on this button, I want to do the following.

• Create another div (with class smallBar)
• Inside this div, I want to create 3 spaces.
• Add this (generic smallBar) content to the 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 divit gives me a message like [object HTMLDivElement]. Let me know where I am wrong and how I can fix it.

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

thank

Answer 1

Must be

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

div. , innerHTML

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

. 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" />

Hide result

, div, appendChild,

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

Answer 2

innerHTML, 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" />

Hide result

P.S - InnerHTML / , HTML . document.getElementById("y").innerHTML = div, , , [object HTMLDivElement] div. innerHTML document.getElementById("y").innerHTML = div.outerHTML;

innerHTML

Answer 3

?

document.getElementById("y").innerHTML = "<div>ABC</div>";

: https://jsfiddle.net/d9hg0vkk/1/

Answer 4

innerHTML, appendChild, div , ,

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

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

Because the "div" is an HTMLDivElement object, and innerHTML only accepts a string. Using outerHTML, you also save the "smallBar" Div. if you use

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

you will see only 3 spans inside div 'y', not div_bb.