Reemplazar el tipo a un tipo de objeto por otro

junihh · #1 (**permalink**) 01/02/2012, 08:36

Hola señores

Necesito reemplazar el tipo de ciertos objetos por otros. O sea, necesito por ejemplo hacer que un DIV se convierta en H1, SPAM u otro. ¿Alguna idea de cómo lograr ese efecto sin jQuery ni ninguna otra librería que no sea javascript puro?

Agradezco de antemano cualquier idea, sugerencia o enlace que me pueda ayudar.

hmbp22 · #2 (**permalink**) 01/02/2012, 09:12

Puedes crear un nuevo elemento, asignarle el contenido del elemento antiguo y reemplazarlo.
Te recomiendo crear una funcion que puedas reutilizar cada vez que quieras hacer esto.

document.createElement() //para crear elementos
innerHTML //para leer y asignar contenido al elemento
replaceChild(nuevo, antiguo) //para reemplazarlo

https://developer.mozilla.org/en/DOM/document.createElement
https://developer.mozilla.org/en/DOM/element.innerHTML
https://developer.mozilla.org/en/DOM/Node.replaceChild

junihh · #3 (**permalink**) 01/02/2012, 11:35

Gracias hmbp22, me sirvió bastante tu sugerencia. Buscaba crear una función que me permita reemplazar los SELECT para poder personalizar como lucen, tal como pasa con muchos plugins para jQuery... pero sin jQuery.

Acá dejo mi demo completo, por si le sirve a alguien más:

Código HTML:

<!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" lang="es" xml:lang="es">
<head>
	<title>Personalizar SELECT tag</title>
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="Content-Language" content="es" />
	
	<style type="text/css">
	/* <![CDATA[ */
	
	.desplegable input {
		float: left;
		width: 150px;
		padding: 4px 8px;
		border: solid 1px #DDD;
		background-color: #FFF;
		cursor: pointer;
	}
	.desplegable:hover ul { display: block; }
	.desplegable ul {
		position: absolute;
		width: 168px;
		max-height: 130px;
		overflow-y: auto;
		list-style: none;
		margin: 24px 0 0 0;
		padding: 0;
		display: none;
	}
	.desplegable li {
		padding: 4px 8px;
		background-color: #DDD;
		cursor: pointer;
	}
	.desplegable li:hover { background-color: #CCC; }
	.desplegable li, .desplegable input { font: 12px/14px Arial,Helvetica,sans-serif; }
	
	/* ]]> */
	</style>
</head>
<body>

	<span class="desplegable"><select id="select-engagement">
		<option selected="selected" value="Elige uno">Elige uno</option>
		<option value="Compromiso 1">Compromiso 1</option>
		<option value="Compromiso 2">Compromiso 2</option>
		<option value="Compromiso 3">Compromiso 3</option>
		<option value="Compromiso 4">Compromiso 4</option>
		<option value="Compromiso 5">Compromiso 5</option>
		<option value="Compromiso 6">Compromiso 6</option>
		<option value="Compromiso 7">Compromiso 7</option>
		<option value="Compromiso 8">Compromiso 8</option>
		<option value="Compromiso 9">Compromiso 9</option>
		<option value="Compromiso 10">Compromiso 10</option>
		<option value="Compromiso 11">Compromiso 11</option>
		<option value="Compromiso 12">Compromiso 12</option>
		<option value="Compromiso 13">Compromiso 13</option>
		<option value="Compromiso 14">Compromiso 14</option>
		<option value="Compromiso 15">Compromiso 15</option>
		<option value="Compromiso 16">Compromiso 16</option>
		<option value="Compromiso 17">Compromiso 17</option>
		<option value="Compromiso 18">Compromiso 18</option>
		<option value="Compromiso 19">Compromiso 19</option>
		<option value="Compromiso 20">Compromiso 20</option>
	</select></span>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		
		function xOb (ob)
		{
			return (typeof ob == 'string') ? document.getElementById(ob) : ob;
		};
		
		function xTg (ob,tg)
		{
			return xOb(ob).getElementsByTagName(tg);
		};
		
		function xText (ob)
		{
			var t = document.getElementsByTagName('body')[0], o = xOb(ob);
			return (t.innerText != undefined) ? o.innerText : o.textContent;
		};
		
		function customSelect (id)
		{
			var slt = xOb(id), sltPrn = slt.parentNode, sltVal = slt.value, ops = xTg(slt,'option');
			
			var txt = document.createElement('input');
			txt.type = 'text';
			txt.value = sltVal;
			txt.readOnly = true;
			sltPrn.replaceChild(txt,slt);
			
			var ul = document.createElement('ul');
			sltPrn.appendChild(ul);
			for (var x = 1, c = ops.length; x < c; x++)
			{
				var li = document.createElement('li');
				li.innerHTML = xText(ops[x]);
				li.val = xText(ops[x]);
				li.onclick = function(){ txt.value = this.val; };
				ul.appendChild(li);
			};
		};
		
		customSelect('select-engagement');
		
	/* ]]> */
	</script>
</body>
</html>