CODEWITHSUNDEEP
javascripthtml
user3872094
user3872094

Reputation: 3351

Unable to createand append divs and spans dynamically

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

Upvotes: 4

Views: 363

Answers (5)

Andreas
Andreas

Reputation: 21881

Another option to Sanchits .appendChild() is .insertAdjacentElement()

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  div.textContent = "div";
  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").insertAdjacentElement("beforeend", div);
}
<div class="y" id="y">

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

Upvotes: 1

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

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

Upvotes: 7

Mahesh Hegde
Mahesh Hegde

Reputation: 184

If you want to use innerHTML and not appendChild which appends the div every time you click on the button, you have to use 

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

instead of 

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

Because 'div' is HTMLDivElement Object and innerHTML accepts only string. By using outerHTML you retain the 'smallBar' Div as well. if you use

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

you'll see only 3 spans inside div 'y' and not 'smallBar' Div.

Upvotes: 1

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

Are you trying like this?

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

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

Upvotes: -1

Suresh Atta
Suresh Atta

Reputation: 121998

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);

Upvotes: 1

Related Questions