El método Insert de Prototype permite insertar contenido a un elemento dado (por ejemplo un DIV). Si el elemento no contiene contenido insert actualizará el elemento. Si el elemento ya tiene contenido insert le agregará el contenido pudiendo indicarle si debe hacerlo por encima o por debajo del contenido existente. Insert permite la inserción de cadenas de texto, cadenas HTML o cualquier elemento del DOM.
Opciones de Insert:
Top: Inserta el contenido indicado dentro del elemento por encima del contenido existente.
Bottom: Inserta el contenido indicado dentro del elemento por debajo del contenido existente.
After: Inserta el contenido debajo del elemento
Before: Inserta el contenido por encima del elemento
Veamos algunos ejemplos para comprender mejor este método. Supongamos este contenido en nuestra página web, un div con id=caja con los estilos convenientes.
<body>
<div id="caja"></div>
</body>
Usando el método insert puedo puedo agregarle contenido HTML de la siguiente manera:
<script>
$('caja').insert("<p>Nuevo contenido para caja</p>");
</script>
Es posible insertar un elemento del DOM nuevo: en este caso insertamos la etiqueta img y le asignamos la imagen logo.png con un ancho de 100. Top le indica a insert que si existe contenido en 'caja' la imagen la coloque encima de éste.
<script>
$('caja').insert({ top: new Element('img', {src: 'logo.png', width: '100'})});
</script>
No hay comentarios:
Publicar un comentario