是否有另一种方法可以使用类“标签”在跨度中循环数组答案

【问题标题】：Is there another way to loop a array in spans with the class "tags"是否有另一种方法可以使用类“标签”在跨度中循环数组
【发布时间】：2019-01-02 20:07:46
【问题描述】：

我正在设置一个本地服务器，并希望为字典（数组）创建一个循环，以便结果以类“标签”的跨度呈现。这样以后就可以像按钮一样使用了。但是代码没有循环，我的问题是是否有另一种方法来循环这段代码

我已经把代码写了好几遍了，还是不行，连浏览器的控制台都没有报错

    <script>
    var ports_dic = [16, 17, 18, 19, 20];
    
    function loop_ports(){   
      var n_list = document.value = ports_dic["1/1/12"] 
      for (var i = 0; i < n_list.length; i++){
    		var span = document.createElement("SPAN");
    		span_element = console.log(ports_dict[i]);
    		span.appendChild(span_element);
    		document.getElementById("onu_tags").appendChild(span);
    	};
    }
    </script>
    <body>
      <div id="onu_tags" class="tags">
           
      </div>
    </body>

我希望在“标签”中输出 16 17 18 19 20 但是没有输出

【问题讨论】：

你创建了一个函数，但我没有看到你在调用它。
函数里面的div标签有什么用
这是一个简化版本，我已经通过 Onclick 调用了该函数，但该函数中有更多详细信息，但已经可以使用

标签： javascript html css arrays loops

【解决方案1】：

 var ports_dic = [16, 17, 18, 19, 20];
    
    function loop_ports(){   
    
    	for (var i = 0; i < ports_dic.length; i++){
    	var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode(ports_dic[i]);         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
document.getElementById("onu_tags").appendChild(node);     // Append <li> to <ul> with id="myList"

    	};
    }

    <body onload="loop_ports()">
      <ul id="onu_tags" class="tags">
           
      </ul>
    </body>

您忘记将字典项放入文本节点（也不需要 console.log 位）。

【讨论】：

【解决方案2】：

ports_dic 不是字典，您没有创建 span_element，而是将“console.log()”分配给变量 span_element。发帖前请仔细检查

<script>
var ports_dic = {"1/1/12":[16, 17, 18, 19, 20]};

function loop_ports(){   
  var n_list = document.value = ports_dic["1/1/12"] 
  for (var i = 0; i < n_list.length; i++){
        var span = document.createElement("SPAN");
        span_element = console.log(n_list[i]);
        span.appendChild(span_element);
        document.getElementById("onu_tags").appendChild(span);
    };
}
</script>
<body onload="loop_ports()">
  <div id="onu_tags" class="tags">

  </div>
</body>

    var ports_dic = {"1/1/12":[16, 17, 18, 19, 20]};
    
    function loop_ports(){   
      var n_list = document.value = ports_dic["1/1/12"] 
      for (var i = 0; i < n_list.length; i++){
    		var span = document.createElement("SPAN");
    		var span_element = document.createTextNode(n_list[i]);
    		span.appendChild(span_element);
    		document.getElementById("onu_tags").appendChild(span);
    	};
    }

    <body onload="loop_ports()">
      <div id="onu_tags" class="tags">
           
      </div>
    </body>

【讨论】：