这里是编程新手。我正在尝试在页面上显示客户的信息。
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 haven
number ofli
elements to haven
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/