de innerHTML a DOM, como?

punk567 · #1 (**permalink**) 09/07/2008, 11:02

Buenas tardes/noches.

Quisiera consultar una duda que tengo sobre javascript básico. He mirado por ahí que innerHTML estará obsoleto en poco tiempo, y que utilizar el DOM es W3C estandar. Y también que innerHTML es mucho más rápido que utilizar el DOM, cuando no vamos a reutilizar el código.

En mi caso necesito crear una función básica que intercambia el contenido de 2 divs, con un click, pego el código. Sería posible mejorarlo utilizando DOM? (para tener una referencia en futuros casos en JS)

Código HTML:

<head>
<script type="text/javascript">	
function intercambiar(e) {
	if (e == "uno") {
		var dos = document.getElementById("dos").innerHTML;
		document.getElementById("dos").innerHTML = document.getElementById("uno").innerHTML;
		document.getElementById("uno").innerHTML = dos;
	}
	else {
		var uno = document.getElementById("uno").innerHTML;
		document.getElementById("uno").innerHTML = document.getElementById("dos").innerHTML;
		document.getElementById("dos").innerHTML = uno;
	}
}
</script>
</head>
<body>
<div id="uno"> 11111111 <a href="#" onclick="intercambiar('uno')">click</a></div>
<div id="dos"> 22222222 <a href="#" onclick="intercambiar('dos')">click</a></div>
</body>

Saludos.

caricatos · #2 (**permalink**) 09/07/2008, 11:34

Hola:

Recuerdo que en estos foros, alguien hizo una comparativa para ver que era más rápido, y justamente llegó a la conclusión contraria, pero no creo que haya suficiente margen como para decidirse por el uso de una u otra opción... y sobre que estará obsoleto tampoco lo sabía... lo que es seguro es que no es estándar... pero su uso es tan masivo que se ha convertido en estándar "de facto" (creo que se dice así

)...

Sobre lo de mejorar tu código con DOM no tengo la menor duda, ya que hay algunas cosas más que no todos usan... como cloneNode y replaceChild...

Código:

<html>
<head>
<title>
	Clonación
</title>
<script type="text/javascript">
function sube(que) {
	var nuevo = que.cloneNode(true);
	que.parentNode.appendChild(nuevo);
	que.parentNode.removeChild(que);
}
</script>
</head>
<body >
<div id="contenedor" style="position: relative; height: 200px">
<div id="amarillo" style="width: 120px; height: 120px; background-color: yellow; position: absolute; top: 5px; left: 5px; border: 1px solid black" onclick="sube(this)"></div>
<div id="rojo" style="width: 120px; height: 120px; background-color: red; position: absolute; top: 35px; left: 35px; border: 1px solid black" onclick="sube(this)"></div>
<div id="azul" style="width: 120px; height: 120px; background-color: blue; position: absolute; top: 65px; left: 65px; border: 1px solid black" onclick="sube(this)"></div>
</div>
</body>
</html>

Creo que este código lo mostré hace algunos años, solo hace falta que lo adaptes.

Saludos

punk567 · #3 (**permalink**) 09/07/2008, 18:56

Hola Caricatos, gracias por el aporte,

despues de un rato pude resolver esto (espero haya quedado mejor):

Código:

<script type="text/javascript">
function intercambia(que) {
	var nuevo = que.parentNode.firstChild.cloneNode(true);
	que.parentNode.appendChild(nuevo);
	que.parentNode.removeChild(que.parentNode.firstChild);
}
</script>
</head>
<body>
<div><div id="amarillo" onclick="intercambia(this)">amarillo</div><div id="azul" onclick="intercambia(this)">azul</div><div id="rojo" onclick="intercambia(this)">rojo</div></div>
</body>
</html>

lo que creo que es a la inversa del ejemplo que enviaste, en lugar de subir, baja, o intercambia con el anterior.

lo que me llamó la atención (y me hizo perder bastante tiempo

)

es que si el código en el body era este:

Código:

<div>
<div id="amarillo" onclick="sube(this)">amarillo</div>
<div id="rojo" onclick="sube(this)">rojo</div>
<div id="azul" onclick="sube(this)">azul</div>
</div>

con simples saltos de línea entre los divs

debía de hacer 2 veces clic en las divs para "pasarlas"

Un saludo y muchas gracias por la ayuda

caricatos · #4 (**permalink**) 09/07/2008, 19:03

Hola:

No se trata de subir o bajar, sino en la práctica se pone encima de el resto de elementos, pero la realidad es que cada elemento se queda como último nodo (por lo de appendChild)...

Lo de los saltos de línea no he llegado a comprender...

Saludos