Crear Listas Desordenadas con Java Script

dubiweb · #1 (**permalink**) 13/05/2009, 13:56

tengo este codigo de lo que necesito hacer tengo un menu que quiero que se creen listas desordenadas pero no se creean uso este escript

<script language="javascript" type="text/javascript">

$("#lista").append("<li>" + $("UNO") + "</li>");
$("#lista").append("<li>" + $("DOS") + "</li>");
$("#lista").append("<li>" + $("TRES") + "</li>");

});

</script>

que me los genera pero nada

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu Dinamico con CSS y JavaScript... UFG</title>
<link type="text/css" rel="stylesheet" href="img/style.css" />
<script language="javascript" src="img/links.js"></script>
<script language="javascript" src="img/jquery-1.3.2.min.js"></script>

<script language="javascript" type="text/javascript">

$("#lista").append("<li>" + $("UNO") + "</li>");
$("#lista").append("<li>" + $("DOS") + "</li>");
$("#lista").append("<li>" + $("TRES") + "</li>");

});

</script>

</head>
<body>
<div id="container">
<div id="top"></div>
<div id="roScripts_m2">

<ul id="lista">
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>
<li><a href="Home.html">Home</a></li>

</ul>

</div>
<div id="bottom"></div>
</div>

<input type="text" id="txt_contenido_li" value="Otro mas" />
<input type="button" id="btn_agregar" value="Agregar" />

</body>
</html>

hector2c · #2 (**permalink**) 13/05/2009, 14:45

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