mdificar HTML desde JS

alfa18 · #1 (**permalink**) 06/04/2011, 10:33

Hola amigos,
tengo un SELECT y me pasn un OPTION mediante una caja de texto ¿Como hago para cargar el nuevo elemento en la lista(SELECT)?

Gracias, saludos:D

laratik · #2 (**permalink**) 06/04/2011, 11:17

por medio de DOM:

Código HTML:

<html>
<head>

<script>
function agregar() {
	var val = document.getElementById("valor").value;
	var opt =document.createElement("option");
	var text = document.createTextNode(val);
	opt.appendChild(text);
	document.getElementById("target").appendChild(opt);
}
</script>
</head>
<body>
<select id="target"></select>
<input type="text" id="valor"><input type="button" value="agregar" onClick="agregar()">
</body>
</body>
</html>

por medio de innerHTML:

Código HTML:

<html>
<head>

<script>
function agregar() {
	var val = document.getElementById("valor").value;
	var opt = document.getElementById("target").innerHTML+"<option>"+val+"</option>";
	document.getElementById("target").innerHTML = opt;
}
</script>
</head>
<body>
<select id="target"></select>
<input type="text" id="valor"><input type="button" value="agregar" onClick="agregar()">
</body>
</body>
</html>

alfa18 · #3 (**permalink**) 06/04/2011, 11:58

Gracias por tu solucion laratik¡¡¡

probe a hacerlo mediante INNERHTML y me salio perfecto, solo te comento dos pequeños problemas:
*en FF me funciona perfectamente, pero en IE no funciona bien(o bien se sale o me vacia toda la lista),¿una solucion para IE(que funcione en ambos, claro)?

*al cargar la lista con el nuevo elemento se pierde la posible seleccion que tenga, ¿hay alguna solucion para no perderla o debo recorrer la lista y guardar el elemento seleccionado antes de cargar la nueva lista?

laratik · #4 (**permalink**) 06/04/2011, 12:30

no me habia fijado pero si, en IE se deforma el string cuando lo ingreso por innerHTML (más precisamente me quita la primera etiqueta), solución a todos tus problemas... utiliza el método del DOM, lo he probado en ambos navegadores y funciona bien, ademas no pierde la selección

.

alfa18 · #5 (**permalink**) 09/04/2011, 05:18

perdona mi ignorancia.............el metodo del DOM?
¿a que te refieres?¿Al 1er metodo de tu post anterior?

laratik · #6 (**permalink**) 10/04/2011, 13:51

exactamente:

Código HTML:

<html>
<head>

<script>
function agregar() {
	var val = document.getElementById("valor").value;
	var opt =document.createElement("option");
	var text = document.createTextNode(val);
	opt.appendChild(text);
	document.getElementById("target").appendChild(opt);
}
</script>
</head>
<body>
<select id="target"></select>
<input type="text" id="valor"><input type="button" value="agregar" onClick="agregar()">
</body>
</body>
</html>