javascript - document.createEelement ("li") 不转到下一行

标签 javascript html

这里是编程新手。我正在尝试在页面上显示客户的信息。

index.html

<HTML><script src="javascript.js"></script>
<body>
<ul id="cus_list"></ul>
</body></html>

javascript.js

var customers = [{
  company: "company1"
  name: "name1"
  phone: "1234567"
  image: "img/img1.jpg"
  url: "www.url.com"
}];


var item = customers[0],
  list = document.getElementById('cus_list'),
  fragment = document.createDocumentFragment(),
  element = document.createElement("li");

element.appendChild(document.createTextNode("Company: " + item.company));
element.appendChild(document.createTextNode("Name: " + item.name + " "));

fragment.appendChild(element);
list.appendChild(fragment);

这是结果:

• 公司:company1名称:name1

为什么这个名字不出现在下一行?

最佳答案

You are creating only one li element. To get elements as a list, you must have n number of li elements to have n number of lines.

试试这个:

var customers = [{
  company: "company1",
  name: "name1",
  phone: "1234567",
  image: "img/img1.jpg",
  url: "www.url.com"
}];


var item = customers[0],
  list = document.getElementById('cus_list'),
  fragment = document.createDocumentFragment(),
  element1 = document.createElement("li"),
  element2 = document.createElement("li");

element1.appendChild(document.createTextNode("Company: " + item.company));
element2.appendChild(document.createTextNode("Name: " + item.name + " "));

fragment.appendChild(element1);
fragment.appendChild(element2);
list.appendChild(fragment);
<ul id="cus_list"></ul>

或者甚至是一种简化的方法:

var customers = [{
  company: "company1",
  name: "name1",
  phone: "1234567",
  image: "img/img1.jpg",
  url: "www.url.com"
}];
var item = customers[0],
  list = document.getElementById('cus_list'),
  element1 = document.createElement("li"),
  element2 = document.createElement("li");
element1.innerText = "Company: " + item.company;
element2.innerText = "Name: " + item.name + " ";
list.appendChild(element1);
list.appendChild(element2);
<ul id="cus_list"></ul>

另请注意,您有无效的对象。每个键值应该用,

分隔

关于javascript - document.createEelement ("li") 不转到下一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34805234/

相关文章:

javascript - 使用 Cytoscape.js 绘制二叉搜索树

javascript - 如何从跨度获取自己的文本而不检索其子节点的文本?

html - 网页中不需要的填充字母

html - CSS 属性选择器对 href 不起作用

javascript - 运行 onclick 函数。所有按钮被点击

jquery - 滚动时移动图像 (Javascript)

javascript - 使用 css-transitions 淡入然后在一段时间后淡出

javascript - 为什么选择排序在 Javascript 中这么快?

javascript - 根据距生日的月份计算年龄javascript

html - 移动设备中垂直居中的 Div 未对齐(使用 flexbox)