无法追加多个孩子

Question

我正在编写代码，我需要创建一个子div并使用JS动态附加多个子节点。

这是我的代码。

＆＃13;

＆＃13;

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

＆＃13;

<div id="col-md-12"></div>

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

＆＃13;

＆＃13;

＆＃13;

我希望输出为

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

但我得到的输出为

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

请告诉我如何获得此输出。

由于

Answer 1

你要保持内在的HTML。这就是你没有看到已经附加的孩子的原因。

你必须实际附加

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

那应该是，

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

这样，您可以通过新添加html来保留现有的html。

Answer 2

试试这段代码。

为什么这样做？

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

var alcohol被覆盖，但在我的代码中，变量被连接起来。因此，输出所需的输出。

＆＃13;

＆＃13;

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

＆＃13;

<div id="col-md-12"></div>

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

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()" />

Answer 4

您可以使用prepend：

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

Jquery link