CODEWITHSUNDEEP
javascripthtml
user3872094
user3872094

Reputation: 3351

Unable to append multiple childs

I'm writing a code where in I need to create a child div and append multiple child nodes dynamically using JS.

Here is my code.

function addDivs() {
  var jsonInput = {
    'a': '1',
    'b': '2'
  }
  var colDiv = document.getElementById("col-md-12");
  var row = document.createElement("div");
  row.className = "row";
  colDiv.appendChild(row);
  Object.keys(jsonInput).forEach(function(k) {
    var string = k;
    var range = jsonInput[k];
    var col4Div = document.createElement("div");
    col4Div.className = "col-md-4 icon-plus";
    var alcohol = document.createElement("span");
    alcohol.className = string;
    var strong = document.createElement("strong");
    strong.innerHTML = string;
    var dropDownArrow = document.createElement("span");
    dropDownArrow.className = "down-arrow";
    row.appendChild(col4Div);
    col4Div.appendChild(alcohol);
    alcohol.appendChild(strong);
    alcohol.appendChild(dropDownArrow);
    alcohol.innerHTML = "<br/>";
    alcohol.innerHTML = range;
  });
}
<div id="col-md-12"></div>

<input type="button" onclick="addDivs()" />

Here I'm expecting the output as 

<div class="col-md-12">
     <div class="row">
        <div class="col-md-4 icon-plus">
           <span class="a">
           <strong>a</strong>
           <span class="down-arrow"></span>
           <br /> 1</span>
        </div>
        <div class="col-md-4 icon-plus">
           <span class="b">
           <strong>b</strong>
           <span class="down-arrow"></span>
           <br /> 2</span>
        </div>
     </div>
  </div>

but I get the output as

 <div id="col-md-12">
     <div class="row">
        <div class="col-md-4 icon-plus">
           <span class="a">1</span>
        </div>
        <div class="col-md-4 icon-plus">
           <span class="b">2</span>
        </div>
     </div>
  </div>

please let me know on how can I get this output.

Thanks

Upvotes: 1

Views: 142

Answers (4)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

try with this

alcohol.append = "<br/>";
alcohol.innerHTML = alcohol.innerHTML + range;


function addDivs() {
  var jsonInput = {
    'a': '1',
    'b': '2'
  }
  var colDiv = document.getElementById("col-md-12");
  var row = document.createElement("div");
  row.className = "row";
  colDiv.appendChild(row);
  Object.keys(jsonInput).forEach(function(k) {
    var string = k;
    var range = jsonInput[k];
    var col4Div = document.createElement("div");
    col4Div.className = "col-md-4 icon-plus";
    var alcohol = document.createElement("span");
    alcohol.className = string;
    var strong = document.createElement("strong");
    strong.innerHTML = string;
    var dropDownArrow = document.createElement("span");
    dropDownArrow.className = "down-arrow";
    row.appendChild(col4Div);
    col4Div.appendChild(alcohol);
    alcohol.appendChild(strong);
    alcohol.appendChild(dropDownArrow);
    alcohol.append = "<br/>";
    alcohol.innerHTML = alcohol.innerHTML + range;
  });
}
<div id="col-md-12">

</div>

<input type="button" onclick="addDivs()" />

Upvotes: 0

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

Try this code.

Why this work?

alcohol.innerHTML += "<br/>";
alcohol.innerHTML += range;

The var alcohol is getting overridden but in my code, the variable is getting concatenated. So, the desired output is outputted.

function addDivs() {
  var jsonInput = {
    'a': '1',
    'b': '2'
  }
  var colDiv = document.getElementById("col-md-12");
  var row = document.createElement("div");
  row.className = "row";
  colDiv.appendChild(row);
  Object.keys(jsonInput).forEach(function(k) {
    var string = k;
    var range = jsonInput[k];
    var col4Div = document.createElement("div");
    col4Div.className = "col-md-4 icon-plus";
    var alcohol = document.createElement("span");
    alcohol.className = string;
    var strong = document.createElement("strong");
    strong.innerHTML = string;
    var dropDownArrow = document.createElement("span");
    dropDownArrow.className = "down-arrow";
    row.appendChild(col4Div);
    col4Div.appendChild(alcohol);
    alcohol.appendChild(strong);
    alcohol.appendChild(dropDownArrow);
    alcohol.innerHTML += "<br/>";
    alcohol.innerHTML += range;
  });
}
<div id="col-md-12"></div>

<input type="button" onclick="addDivs()" />

Upvotes: 0

Amitesh Kumar
Amitesh Kumar

Reputation: 3079

You can use prepend: 

$('Selector ').prepend($('<div> new div </div>'));

Jquery link

Upvotes: -1

Suresh Atta
Suresh Atta

Reputation: 122006

You are keep ovveriding the innerHTML. That is the reason you are not seeing the already appended children.

You have to append it actually

    ..
    alcohol.appendChild(dropDownArrow);
    alcohol.innerHTML = "<br/>";
    alcohol.innerHTML = range;

That should be,

 ..
 alcohol.appendChild(dropDownArrow);
 alcohol.innerHTML = alcohol.innerHTML +"<br/>";
 alcohol.innerHTML = alcohol.innerHTML + range;

That way, you can retain the existing html with newly adding html.

Upvotes: 2

Related Questions