document.creatElement ("li") не переходит к следующей строке

Новое программирование здесь. Я пытаюсь отобразить информацию клиента на странице.document.creatElement ("li") не переходит к следующей строке

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

Почему бы не имя идти на следующей строке?

источник

2016-01-15 Tang Keith

У вас JSON не в допустимом формате. Добавить запятые. –

Вы создаете только один элемент 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 должны быть отделены друг от ,

источник

2016-01-15 06:10:24 Rayon

Кроме того, я бы рекомендовал список определений с условиями и описаниями вместо неупорядоченного списка. – Oriol

@Oriol, Есть ли причина для этого? – Rayon

Это просто, что '

Компания: Company1

' кажется более семантический, чем '

Компания: Company1

' – Oriol

упрощенный

\t 
 
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" 
    }];

источник

2016-01-15 06:12:46

Это не ответ на вопрос. –

вы можете использовать Jquery, что-то вроде низкий код

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

источник

2016-01-15 06:21:00

Вам нужно создать 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); 
});

источник

2016-01-15 06:47:53

document.creatElement ("li") не переходит к следующей строке

ответ

Смежные вопросы