jQuery - Element invoegen, verwijderen of vrijmaken


Met jQuery kun je eenvoudig een element voor, achter of binnen een bestaand element toevoegen. Dit doe je op de onderstaande manier waarbij er in dit geval tekst wordt geplaatst voor (before) of achter (after) een element. Door append te gebruiken wordt de tekst binnen het element voor de sluitende tag toegevoegd, door juist prepend te gebruiken wordt de tekst binnen het element direct na de openingstag toegevoegd.

$(document).ready(function() {
        $("#text").before("Lorem Ipsum");
        $("#text").after("Lorem Ipsum");
        $("#text").prepend("Lorem Ipsum");
        $("#text").append("Lorem Ipsum");

        $('#text span:nth-child(2n)').after('<br /><br />');
});

Element verwijderen of verbergen

Op een vergelijkbare manier verwijder en verberg je elementen op een pagina.

$(document).ready(function() {
        $("#text").remove();
        $("#text").hide();
});

Element vervangen

Met de onderstaande code kan een element inclusief inhoud worden vervangen.

$(document).ready(function() {
        $('#text').replaceWith('<br />');
});

Element vrijmaken of omsluiten

Maak elementen eenvoudig vrij met de onderstaande code. Stel dat je bijvoorbeeld een link hebt staan binnen een div dan kun je door deze code toe te passen de omliggende div verwijderen. Dit kan bijvoorbeeld wel eens van pas komen als er geen andere manier is.

$(document).ready(function() {
        $('a').unwrap();
});


Op de bovenstaande manier maak je een element vrij maar zo kun je ook tags wrappen.

$(document).ready(function() {
        $('a').wrap("<span></span>");
        $('a').wrapInner("<span></span>");
});

Zichtbaarheid element

Een klein stukje code om te controleren of een element zichtbaar is op de pagina.

$(document).ready(function() {
        if ($("header div#element").is(":visible")) {
        } else {
                $("header div#element").slideDown(300);
        }
});

Checken of een element bestaat

Aanvullend op de bovenstaande code kun je ook eenvoudig bekijken of een element bestaat of niet. In het geval dat het element bestaat wordt er een classnaam toegevoegd.

$('#twitter').has('a').addClass("note");