insertar <li> en una lista <ul>

dablin · #1 (**permalink**) 12/02/2009, 05:56

Hola a todos!
Tengo una pagina con una lista <ul> a la que le quiero ir insertando dinamicamente elementos <li>.

La lista en cuestión es <ul id='lista'></ul>

y los elementos <li> suelen ser mas o menos

Código:

<li id='elem1'> 
 <div id='col'> -----</div>
</li>

Están almacenados en una variable contenido en el documento javascript
si hago lo siguiente

Código:

 
document.getElementById('lista').innerHTML = contenido

me inserta uno pero como llame otra vez a esa funcion me pisa el elemento que tenía y me mete el nuevo.

¿Cómo puedo hacer para que se vayan añadiendo uno detrás de otro?

Panino5001 · #2 (**permalink**) 12/02/2009, 06:06

en lugar del operador =, que sustituye, usá +=, que añade.

dablin · #3 (**permalink**) 12/02/2009, 08:58

je je que sencillo era. :) ni se me había pasado por la cabeza

Muchas gracias.

hector2c · #4 (**permalink**) 13/05/2009, 14:43

jQuery te da la solución XD, tambien puedes descargarlo desde este enlace

script:

Código HTML:

<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$("#txt_contenido_li").focus();
		$("#btn_agregar").click(function(){
			$("#lista").append("<li>" + $("#txt_contenido_li").val() + "</li>");
			$("#txt_contenido_li").val("").focus();
		});
	});
</script>

html:

Código HTML:

<input type="text" id="txt_contenido_li" value="Otro mas" />
<input type="button" id="btn_agregar" value="Agregar" />
<ul id="lista">
    <li>Aqui viene un item</li>
    <li>Aqui va otro item</li>
</ul>

nos vemos!!!

pato12 · #5 (**permalink**) 13/05/2009, 17:30

Prueba esto:

Código javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lista LI</title>
<script type="text/javascript">
<!--
function agreagarLi(){
    var texto=document.getElementById('liname').value;
    var li=document.createElement('LI');
    li.innerHTML=texto==''?'(nada)':texto;
    document.getElementById('lista').appendChild(li);
}
function borrar(){
    lis=document.getElementById('lista').getElementsByTagName('li');
    for(var i=0; i<lis.length;i++){
        lis[i].onclick=function(){
            if(confirm('¿Borrar este li?'))
            this.parentNode.removeChild(this);
        };
    }
    
}
-->
</script>
</head>
 
<body>
<input type="text" id="liname" value="Otro mas" />
<input type="button" onclick="agreagarLi();" value="Agregar" />
<ul id="lista" onclick="borrar();">
    <li>Aqui viene un item</li>
    <li>Aqui va otro item</li>
</ul>
</body>
</html>