Tạo các phần tử ul và li trong javascript.

Tôi đang cố tạo phần tử ul và li trong mã của mình bằng cách sử dụng javascript. Tôi đã sau:Tạo các phần tử ul và li trong javascript.

var test=document.createElement('section'); 
test.setAttribute('id','test'); 

var ul=document.createElement('ul'); 


document.body.appendChild(test); 
test.appendChild(ul); 

for (var i=0; i<array.length; i++){ 

    var li=document.createElement('li'); 

    ul.appendChild(li); 
    li.innerHTML=li.innerHTML + array[i]; 

}

mảng của tôi được phân tách sử dụng json_encode từ php

array[0]='aaa'; 
array[1]='bbb'; 
array[2]='ccc';

CSS

section { 

    display: block; 
    width: 200px; 
    margin: 50px auto; 
    border: 3px solid red; 

}

Tất cả mọi thứ hoạt động tốt, ngoại trừ dấu chấm danh sách phong cách bên ngoài của thẻ phần của tôi.

Nó hiển thị như thế này trong Chrome và IE nhưng firefox hoạt động tốt.

------------- 
*| aaa  | 
*| bbb  | 
*| ccc  | 
-------------

Tôi muốn dấu chấm trong thẻ phần của tôi. Bất cứ ai ý tưởng? Cảm ơn rất nhiều.

Nguồn

2012-07-05 Rouge

đã thử sử dụng 'danh sách kiểu-vị trí: bên trong'? –

lol nó hoạt động. đơn giản như thế. đoán Chrome và IE cần nó. Cảm ơn rất nhiều. – Rouge

Nó làm việc cho tôi mà không có - http://jsfiddle.net/XepXZ/1 – Alnitak

Sử dụng CSS tài sản list-style-position vị trí viên đạn:

list-style-position:inside /* or outside */;

Nguồn

2012-07-05 19:26:27 xandercoded

Đây là mã của tôi làm việc:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    ul#proList{list-style-position: inside} 
    li.item{list-style:none; padding:5px;} 
</style> 
</head> 
<body> 
    <div id="renderList"></div> 
</body> 
<script> 
    (function(){ 
     var ul = document.createElement('ul'); 
     ul.setAttribute('id','proList'); 

     var t, tt; 
     productList = ['Electronics Watch','House wear Items','Kids wear','Women Fashion']; 

     document.getElementById('renderList').appendChild(ul); 
     productList.forEach(renderProductList); 

     function renderProductList(element, index, arr) { 
      var li = document.createElement('li'); 
      li.setAttribute('class','item'); 

      ul.appendChild(li); 

      t = document.createTextNode(element); 

      li.innerHTML=li.innerHTML + element; 
     } 
    })(); 
</script> 
</html>

làm việc ví dụ jsfiddle here

Nguồn

2015-08-07 09:03:28

cảm ơn ... nó thực sự giúp đỡ –

bro chào mừng .... –

câu trả lời của tôi

tôi có nghĩa là

var list = []; 

var text;

Cập nhật chức năng() { console.log (danh sách);

for (var i = 0; i < list.length; i++) { 

console.log(i) 

    var letters; 

    var ul = document.getElementById("list"); 

    var li = document.createElement("li");

li.appendChild (document.createTextNode (danh sách [i]));

ul.appendChild (li);

chữ cái + = "

" + danh sách [i] + "

"; }

document.getElementById ("danh sách"). InnerHTML = letters;

chức năng myFunction() {

text = prompt("enter TODO"); 

list.push(text); 

update();

}

Nguồn

2016-12-24 10:06:18 sanjar

vĩ đại rồi. Hãy tạo một hàm đơn giản lấy một mảng và in danh sách/danh sách theo thứ tự của chúng ta bên trong thẻ div.

Bước 1: Giả sử bạn có div có id "contentSectionID".<div id="contentSectionID"></div>

Bước 2: Sau đó chúng tôi tạo ra chức năng javascript của chúng tôi mà trả về một phần danh sách và mất trong một mảng:

function createList(spacecrafts){ 

var listView=document.createElement('ol'); 

for(var i=0;i<spacecrafts.length;i++) 
{ 
    var listViewItem=document.createElement('li'); 
    listViewItem.appendChild(document.createTextNode(spacecrafts[i])); 
    listView.appendChild(listViewItem); 
} 

return listView; 
}

Bước 3: Cuối cùng, chúng tôi chọn div của chúng tôi và tạo ra một listview trong đó:

document.getElementById("contentSectionID").appendChild(createList(myArr));

Nguồn

2017-08-10 05:57:52 Oclemy

Tạo các phần tử ul và li trong javascript.

Trả lời

Các vấn đề liên quan