Question

我是JS的新手，想在我的网页上创建10条垂直线。我已将我的HTML代码编写为

  <div id="verticle-line"></div>

在我的CSS中我有

#verticle-line {
width: 1px;
min-height: 400px;
background: red;  
margin:15px;  
float:left
}

如何使用JavaScript在我的网页中创建10条这样的行？

Answer 1

有很多方法可以做到这一点，但最简单的可能就是：

for(var i=0; i<10; i++) {
  document.write('<div class="verticle-line"></div>');
}

使用for循环在页面上写入10个div。我还将id改为class，因为你的页面上不应该有多个具有相同id的元素。确保更改CSS以匹配类。

Answer 2

见这 -

for(x=0; x<9;x++) {
    var vertical = document.createElement('div');
    vertical.className = "verticle-line";
    document.getElementById('wrapper').appendChild(vertical);
}

.verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
  margin: 15px;
  float: left
}

<div id="wrapper">
  <div class="verticle-line"></div>
</div>

使用循环在HTML中创建多个垂直线

2 个答案: