在 Javascript document.write 中添加空格

Question

所以我目前正在使用一些 JavaScript 和一组对象创建一个动态表。我需要在两者之间添加一些空白，但一个空格是不够的，我需要将其几乎标记出来。最好的方法是什么？到目前为止，这是我的代码：

 var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') + o.sname + '  ' + o.mscore + ' ' }, '')
);

原文由 DoN_Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果要向 DOM 添加空格，请尝试使用不间断空格

' '

代替

' '

这些不间断的空间可以被链接起来。

   

将强制在页面上显示两个空格。

原文由 jros 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以 return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>" 并使用 CSS 设置空白。

 var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + "<div class='whatever'>" + o.sname + '  ' + o.mscore + "</div>" }, '')
);

 div.whatever { padding-bottom: 5em; }

更新 使用表：

 var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write("<table>" + Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + "<tr><td>" + o.sname + '</td><td>' + o.mscore + "</td></tr>" }, '')
+ "</table>");

 td { padding-bottom: 2em }

原文由 Kenney 发布，翻译遵循 CC BY-SA 3.0 许可协议