Question

var x = document.getElementById("p");

var array = [
  ["Tino Kreutzer", " York University"],
  ["Prativa Baral", " York University"],
  ["Bobi Morris", " International Rescue Committee"],
  ["William Martin", " Catholic Relief Services"],
  ["Ruwan Rataynake", " London School of Hygiene & Tropical Medicine"]
];

var i;
var n;
for (i = 0, n = array.length; i < n; i++) {
  var column = document.createElement("div");
  column.className = "4u";
  var line = document.createElement("span");
  line.className = "nameCSS";
  var name = document.createTextNode(array[i][0]);
  line.appendChild(name);
  var line2 = document.createElement("span");
  line2.className = 'orgCSS';
  var org = document.createTextNode(array[i][1]);
  line2.appendChild(org);
  column.appendChild(line);
  column.appendChild(line2);
  x.appendChild(column);
};

.line {
  font-weight: bold;
 }

<body>
  <div id="p">

  </div>
</body>

制作具有以下内容的div框的最简单方法是：https://ibb.co/G3JYdrL

我想做的是将数组循环和createElements一起使用：

<div class="row">
<div class="4u"><span>Name<br></span><span>Organization</span></div>
<div class="4u"><span>Name<br></span><span>Organization</span></div>
<div class="4u"><span>Name<br></span><span>Organization</span></div>  
<div class="4u"><span>Name<br></span><span>Organization</span></div>
<div class="4u"><span>Name<br></span><span>Organization</span></div>  
</div>

Answer 1

这里很多，但是...

应该为var column = document.createElement("div");
应为column.appendChild(line);和column.appendChild(line2);

除此之外，我不知道它应该是什么样子，因为小提琴中缺少几个CSS类，并且您的图像链接要求您登录到Slack，我没有帐户，也不会创建一个帐户只为你。使用imgur或其他不需要帐户的东西。

JavaScript循环数组和制作框

1 个答案: