Question

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

的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);

结果如下：

•公司：company1Name：name1

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

Answer 1

您只创建了一个li元素。要将元素作为列表，您必须拥有n个li个元素才能拥有n行数。

试试这个：

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>

另请注意，您的对象无效。每个key-value应以,

分隔

Answer 2

简化

	
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"),
  element3 = document.createElement("li"),
  element4 = document.createElement("li"),
  element5 = document.createElement("li");
element1.innerText = "Company: " + item.company;
element2.innerText = "Name: " + item.name + " ";
element3.innerText = "Phone: " + item.phone + " ";
element4.innerText = "image: " + item.image + " ";
element5.innerText = "url: " + item.url + " ";
list.appendChild(element1);
list.appendChild(element2);
list.appendChild(element3);
list.appendChild(element4);
list.appendChild(element5);

<ul id="cus_list"></ul>

您错过了在客户数组对象中添加，

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

Answer 3

你可以使用Jquery，类似下面的代码

var li = $('<li></li>');
li.html('Test!');
$('#cus_list').append(li);

Answer 4

您需要为每个数据属性创建li标记试试这个。

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

var renderElement = function(ele_text){
    var element = document.createElement("li");
    element.appendChild(document.createTextNode(ele_text));
    return element;
}

customers.forEach(function(customer) {
    var list = document.getElementById('cus_list'),
    fragment = document.createDocumentFragment();

    fragment.appendChild(renderElement("Company: " + customer.company));
    fragment.appendChild(renderElement("Name: " + customer.name));
    list.appendChild(fragment);
});

document.creatElement（＆＃34; li＆＃34;）不会转到下一行

4 个答案: