Crea elementos ul y li en javascript.

Estoy tratando de crear elementos ul y li en mis códigos usando javascript. He siguientes:Crea elementos ul y li en 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]; 

}

Mi matriz se analiza el uso de php json_encode

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

CSS

section { 

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

}

Todo funciona bien, excepto el punto lista de estilos está fuera de mi sección de la etiqueta.

Se muestra así en Chrome e IE pero Firefox funciona bien.

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

I want my dot inside my section tag. Alguien idea? Muchas gracias.

Fuente

2012-07-05 Rouge

intentado usar 'list-style-position: inside'? –

lol funciona. simple como eso. supongo que Chrome y IE lo necesitan. Muchas gracias. – Rouge

Funciona para mí sin - http://jsfiddle.net/XepXZ/1 – Alnitak

utilizar la propiedad list-style-positionCSS para posicionar la bala:

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

Fuente

2012-07-05 19:26:27 xandercoded

Aquí está mi código de trabajo:

<!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>

trabajando ejemplo jsFiddle here

Fuente

2015-08-07 09:03:28

gracias ... es realmente ayuda –

bienvenido hermano .... –

mi respuesta

me refiero

var list = []; 

var text;

actualización de la función() { console.log (lista);

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 (lista [i]));

ul.appendChild (li);

letters + = "

" + list [i] + "

"; }

document.getElementById ("list"). InnerHTML = letters;

función myFunction() {

text = prompt("enter TODO"); 

list.push(text); 

update();

}

Fuente

2016-12-24 10:06:18 sanjar

Gran entonces. Vamos a crear una función simple que tome una matriz e imprima nuestra lista de lista ordenada dentro de una etiqueta div.

Paso 1: supongamos que tiene un div con la identificación "contentSectionID".<div id="contentSectionID"></div>

Paso 2: A continuación, creamos nuestra función de JavaScript que devuelve un componente de lista y toma en una matriz:

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; 
}

Paso 3: Por último seleccionamos nuestra div y creamos una vista de lista en él:

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

Fuente

2017-08-10 05:57:52 Oclemy

Crea elementos ul y li en javascript.

Respuesta

Cuestiones relacionadas