document.creatElement(“li”） 不会转到下一行

document.creatElement("li") does not go to next line

本文关键字：一行 creatElement li document      更新时间：2023-09-26

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

索引.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);

结果如下：

• 公司：

公司1名称： 名称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都应用,分隔

你可以

使用Jquery，类似于下面的代码

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

简体

	
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"
    }];
您需要

为每个数据属性创建 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);
});
相关文章：