javascript - 使用 Javascript 创建 HTML div 感到困惑

Question

我正在编写一个代码，其中给出了一个 json，并且我需要从 json 的键值对中创建 HTML div。

这是我的 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>

请让我知道哪里出了问题以及如何解决。

这是一个工作 fiddle 。 https://jsfiddle.net/p9e7cLg9/1/

谢谢

Answer 1

innerHTML 处理字符串(HTML 源代码)。 createElement 处理 DOM 节点。

当您将 DOM 节点转换为字符串时，您会得到 "[object HTMLDivElement]"，它没有用，所以不要这样做。

使用the appendChild method添加 DOM 节点作为现有 HTML 元素的子元素。