混淆使用Javascript創建HTML div

Question

我正在編寫一個代碼，其中給定了一個json，而我需要創建HTML div的json的鍵值對中。

這是我的HTML

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

</div>

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

和我的JS

        function addDivs() {
          var jsonInput = {
            'a': '1',
            'b': '2'
          }
          var colDiv = document.getElementById("col-md-12");
          var row = document.createElement("div");
          row.className = "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";
            alcohol.innerHTML = strong;
            alcohol.innerHTML = dropDownArrow;
            alcohol.innerHTML = "<br/>";
            alcohol.innerHTML = range;
            col4Div.innerHTML = alcohol;
            row.innerHTML = col4Div;
          });
          colDiv.innerHTML=row;
        }

當我單擊按鈕時，它以[object HTMLDivElement]顯示消息，並且在控制台中未顯示任何錯誤。

我對后端發生的事情感到非常困惑。 我的預期輸出是

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

請讓我知道我要去哪里錯了，我該如何解決。

這是一個工作的小提琴。 https://jsfiddle.net/p9e7cLg9/1/

謝謝

Answer 1

innerHTML處理（HTML源代碼的） 字符串 。 createElement處理DOM節點 。

當您將DOM節點轉換為字符串時，會得到"[object HTMLDivElement]" ，它沒有用，所以不要這樣做。

使用appendChild方法可將DOM節點添加為現有HTML元素的子元素。