"Descubre estos trucos de jQuery para dominar el DOM"

¿Estás buscando una forma fácil y eficiente de manipular el DOM en tus proyectos web? ¡No busques más! En este artículo te presentamos algunos métodos de manipulación con jQuery DOM que te ayudarán a ahorrar tiempo y mejorar tu experiencia de programación. Descubre cómo agregar, eliminar y modificar elementos en el DOM de manera sencilla y eficaz con estas herramientas imprescindibles. ¡Sigue leyendo para conocer más!

jQuery proporciona métodos para manipular fácil y efectivamente elementos en el Modelo de objeto de documento (DOM). jQuery le permite navegar y manipular sus documentos.

DOM la navegación y la manipulación con JavaScript estándar requieren un poco más de trabajo que con los métodos de jQuery. Echaremos un vistazo a los métodos más comunes en este artículo.

Métodos

Los métodos enumerados en la siguiente tabla se usan comúnmente para la manipulación de DOM.

Método	Descripción	Sintaxis
`after()`	Inserta contenido después de los elementos seleccionados	`$(selector).after(content)`
`append()`	Inserta contenido dentro, al final de los elementos seleccionados	`$(selector).append(content)`
`appendTo()`	Inserta contenido dentro, al final de los elementos seleccionados	`$(content).appendTo(selector)`
`attr()`	Establece o devuelve un atributo y valor de elementos seleccionados	`$(selector).attr(attribute,value)`
`before()`	Inserta contenido antes de los elementos seleccionados	`$(selector).before(content)`
`detach()`	Elimina los elementos seleccionados, pero conserva los datos de jQuery.	`$(selector).detach()`
`empty()`	Elimina elementos secundarios y contenido del elemento seleccionado	`$(selector).empty()`
`html()`	Establece o devuelve el contenido de los elementos seleccionados	`$(selector).html(content)`
`insertAfter()`	Inserta HTML después de los elementos seleccionados	`$(content).insertAfter(selector)`
`insertBefore()`	Inserta HTML antes de los elementos seleccionados	`$(content).insertBefore(selector)`
`prepend()`	Inserta contenido dentro, al principio de los elementos seleccionados	`$(selector).prepend(content)`
`prependTo()`	Inserta contenido dentro, al principio de los elementos seleccionados	`$(content).prependTo(selector)`
`remove()`	Elimina los elementos seleccionados del DOM	`$(selector).remove()`
`removeAttr()`	Elimina un atributo de los elementos seleccionados	`$(selector).removeAttr(attribute)`
`replaceAll()`	Reemplaza los elementos seleccionados con contenido nuevo	`$(content).replaceAll(selector)`
`replaceWith()`	Reemplaza los elementos seleccionados con contenido nuevo	`$(selector).replaceWith(content)`
`text()`	Establece o devuelve el contenido de texto de los elementos seleccionados	`$(selector).text(content)`

Ejemplo HTML

Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.itgeared.com/jquery-dom-html-manipulation-methods/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          // ... jQuery Code ...
        });
    </script>
</head>
<body>
    <img id="img1" src="go.png" /> ; 
    <div id="div1"> <!-- Some Content --> </div>
</body>
</html>

Ejemplos

Aquí puedes ver varios manipulación DOM métodos a continuación. Notará que algunos de los métodos a continuación producen los mismos resultados. Sin embargo, mientras ese sea el caso, algunos métodos pueden tener más flexibilidad con respecto al paso de parámetros adicionales. Para obtener información detallada sobre cada método, puede visitar jQuery.com.

.después()

$("#go").click(function () {
    $("#div1").after("<div>Hello!</div>");
});

.adjuntar()

$("#go").click(function () {
    $("#div1").append("<div>Hello!</div>");
});

.appendTo()

$("#go").click(function () {
    $("<div>Hello!</div>").appendTo("#div1");
});

.attr()

$("#go").click(function () {
    $("#go").attr({"width":"96","height":"96"});
});

.antes()

$("#go").click(function () {
    $("#div1").before("<div>Hello!</div>");
});

.despegar()

$("#go").click(function () {
    $("#div").detach();
});

.vacío()

$("#go").click(function () {
    $("#div").empty();
});

.html()

$("#go").click(function () {
    $("#div").html("<em>Hello!</em>");
});

.insertarDespués()

$("#go").click(function () {
    $("<div>Hello!</div>").insertAfter("#div1");
});

.insertarAntes()

$("#go").click(function () {
    $("<div>Hello!</div>").insertBefore("#div1");
});

.anteponer()

$("#go").click(function () {
    $("#div").prepend("<div>Hello!</div>");
});

.prependTo()

$("#go").click(function () {
    $("<div>Hello!</div>").prependTo("#div1");
});

.eliminar()

$("#go").click(function () {
    $("#div").remove();
});

.removeAttr()

$("#go").click(function () {
    $("#div").removeAttr("style");
});

.reemplaza todo()

$("#go").click(function () {
    $("<div><strong>Hello!</strong></div>").replaceAll("#div1");
});

.reemplazar con()

$("#go").click(function () {
    $("#div1").replaceWith("<div>Hello!</div>");
});

.texto()

$("#go").click(function () {
    $("#div1").text("<b>Hello!</b> // Text, not HTML");
});

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Métodos de manipulación jQuery DOM | TIEngranaje