IT TUTORIJALI | jQuery

jQuery - Umetanje sadržaja (Insert Content)

Umetanje novog jQuery sadržaja

jQuery pruža nekoliko metoda, poput: append(), prepend(), html(), text(), before(), after(), wrap() itd., što nam omogućava umetanje novog sadržaja u postojeći element. jQuery metode html() i text() već su obrađene u prethodnim lekcijama, pa ćemo u ovoj lekciji naučiti o ostalima.

jQuery append() metoda

jQuery metoda append() se koristi za umetanje sadržaja na kraj odabranih elemenata. Sljedeći primjer će dodati neki HTML sadržaj svim paragrafima u dokumentu, dok će dodati dio teksta elementu container na klik.

<script>
$(document).ready(function(){
    // Dodajte sve paragrafe
    $("p").append(' <a href="#">detaljnije...</a>');
    
    // Dodaj element s ID-ijem container
    $("button").click(function(){
       $("#container").append("Ovo je neki demo tekst.");
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umetanje HTML sadržaja na kraju elemenata u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Spremite sve paragrafe dokumenta
    $("p").append(' <a href="#">detaljnije...</a>');
    
    // Dodaj div container klikom na dugme
    $("button").click(function(){
       $("#container").append("Ovo je neki demo tekst. ");
    });
});
</script>
</head>
<body>
    <button type="button">Umetni tekst</button>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
        nec turpis vel, semper malesuada ante.</p>

        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi
        a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra
        sagittis quam at mattis. Suspendisse potenti.</p>
    </div>
</body>
</html>

Napomena!

Sadržaji ili umetnuti elementi pomoću jQuery metodama append() i prepend() dodaju se unutar odabranih elemenata.

jQuery prepend() metoda

Metoda prepend() koristi se za umetanje sadržaja na početak odabranih elemenata. Sljedeći primjer će dodati neki HTML sadržaj svim paragrafima na dokumentu, dok će dodati neki tekst elementu container na klik.

<script>
$(document).ready(function(){
    // Dodaj u sve paragrafe
    $("p").prepend("<strong>Napomena:</strong> ");
    
    // Dodaj elementu s ID-jem container
    $("button").click(function(){
       $("#container").prepend("Ovo je neki demo tekst.");
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umetanje HTML sadržaja na početak elemenata u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Dodaj na sve odlomke dokumenta
    $("p").prepend("<strong>Napomena:</strong> ");
    
    // Dodaj div container-u na klik dugmeta
    $("button").click(function(){
       $("#container").prepend("Ovo je neki demo tekst. ");
    });
});
</script>
</head>
<body>
    <button type="button">Umetni tekst</button>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
        nec turpis vel, semper malesuada ante.</p>

        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi
        a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra 
        sagittis quam at mattis. Suspendisse potenti.</p>
    </div>
</body>
</html>

Umetnite više elemenata metodom append() & prepend()

jQuery metode append() i prepend() takođe podržavaju prosljeđivanje više argumenata kao ulaz. jQuery kod u sljedećem primjeru umetnuće element &h1>, <p> i <img> unutar elementa <body> kao posljednja tri podređena elemeta.

<script>
$(document).ready(function(){
    var newHeading = "<h1>Važna napomena:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Ovo je neka važna napomena...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("body").append(newHeading, newParagraph, newImage);
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dodavanje više elemenata u jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var newHeading = "<h1>Važna napomena:</h1>";
        var newParagraph = document.createElement("p");
        newParagraph.innerHTML = "<em>Ovo je neka važna napomena...</em>";
        var newImage = $('<img src="/examples/images/smiley.png" alt="Symbol">');
        $("body").append(newHeading, newParagraph, newImage);
    });
});
</script>
</head>
<body>
    <button type="button">Umetni sadržaj</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu 
    sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus 
    nec turpis vel, semper malesuada ante, metus ac nisl bibendum.</p>
</body>
</html>

jQuery metoda before()

jQuery metoda before() koristi se za umetanje sadržaja prije odabranih elemenata. Sljedeći primjer će umetnuti pasus prije elementa container na dokumentu, a sliku će umetnuti prije elementa <h1> klikom na dugme.

<script>
$(document).ready(function(){
    // Dodavanje sadržaja prije elementa s ID-jem container
    $("#container").before("<p>&mdash; IT TUTORIJALI &mdash;</p>");
    
    // Dodavanje sadržaja prije naslova
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umetanje HTML sadržaja prije ili poslije elemenata u jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Dodavanje sadržaja nakon što je div container na dokumentu spreman
    $("#container").after("<p>&mdash; IT TUTORIJALI &mdash;</p>");
    
    // Dodavanje sadržaja nakon što je div container na dokumentu 
    $("#container").before("<p>&mdash; DEMO TEKST &mdash;</p>");
    
    // Dodavanje sadržaj nakon klika na dugme
    $("button.insert-after").click(function(){
        $("h1").after('<img src="/examples/images/marker-right.gif" alt="Symbol">');
    });
    
    // Dodavanje sadržaja prije nego što krenete klikom na dugme
    $("button.insert-before").click(function(){
        $("h1").before('<img src="/examples/images/marker-left.gif" alt="Symbol">');
    });
});
</script>
<style>
    h1{
        display: inline-block; /* Za postavljanje slike markera i naslova u jedan red */
    }
    body{
        text-align: center;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <hr>
    <button type="button" class="insert-before">Umetni prije</button>
    <button type="button" class="insert-after">Umetni poslje</button>
    <hr>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
        nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl 
        bibendum scelerisque non non purus. Suspendisse varius nibh non 
        aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus
        fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. 
        Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer 
        aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus
        ligula.</p>

        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi 
        a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra 
        sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida 
        nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, 
        commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue 
        dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, 
        bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui 
        molestie euismod. Curabitur et diam tristique, accumsan nunc eu, 
        hendrerit tellus.</p>
    </div>
</body>
</html>

Napomena!

Sadržaj ili elementi umetnuti pomoću jQuery metoda before() i after() se dodaju izvan odabranih elemenata.

jQuery after() metode

jQuery metoda after() koristi se za umetanje sadržaja nakon odabranih elemenata. Sljedeći primjer će umetnuti sadržaja nakon elementa container na dokumentu, dok će se slika umetnuti nakon elementa <h1> na klik dugmeta.

<script>
$(document).ready(function(){
    // Dodavanje sadržaja nakon elementa s ID-jem container
    $("#container").after("<p>&mdash; IT TUTORIJALI &mdash;</p>");
    
    // Dodavanje sadržaja nakon naslova
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umetanje HTML sadržaja prije ili poslije elemenata u jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Dodavanje sadržaj nakon što je container div na dokumentu spreman
    $("#container").after("<p>&mdash; IT TUTORIJALI &mdash;</p>");
    
    // Dodavanje sadržaj nakon što je container div na dokumentu 
    $("#container").before("<p>&mdash; DEMO TEKST &mdash;</p>");
    
    // Dodajte sadržaj nakon klika na dugme
    $("button.insert-after").click(function(){
        $("h1").after('<img src="/examples/images/marker-right.gif" alt="Symbol">');
    });
    
    // Dodajte sadržaj prije klika na dugme
    $("button.insert-before").click(function(){
        $("h1").before('<img src="/examples/images/marker-left.gif" alt="Symbol">');
    });
});
</script>
<style>
    h1{
        display: inline-block; /* Za postavljanje slike markera i naslova u jedan red */
    }
    body{
        text-align: center;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <hr>
    <button type="button" class="insert-before">Umetni prije</button>
    <button type="button" class="insert-after">Umetni poslje</button>
    <hr>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu
        sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus 
        nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl 
        bibendum scelerisque non non purus. Suspendisse varius nibh non 
        aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus 
        fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. 
        Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer 
        aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus
        ligula.</p>

        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi 
        a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra 
        sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida 
        nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, 
        commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue 
        dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, 
        bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui 
        molestie euismod. Curabitur et diam tristique, accumsan nunc eu, 
        hendrerit tellus.</p>
    </div>
</body>
</html>

Umetanje više elemenata metodom before() i after()

jQuery metode before() & after() takođe podržavaju prosljeđivanje više argumenata kao ulaz. Sljedeći primjer će umetnuti <h1>, <p> i <img> elementa prije elemenata <p>.

<script>
$(document).ready(function(){
    var newHeading = "<h2>Važna napomena:</h2>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Ovo je neka važna napomena...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("p").before(newHeading, newParagraph, newImage);
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umetanje više elemenata prije ili poslije elemenata u jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var newHeading = "<h2>Važna napomena:</h2>";
        var newParagraph = document.createElement("p");
        newParagraph.innerHTML = "<em>Neka važna napomena...</em>";
        var newImage = $('<img src="/examples/images/smiley.png" alt="Symbol">');
        $("p").before(newHeading, newParagraph, newImage);
    });
    
});
</script>
</head>
<body>
    <button type="button">Umetni sadržaj</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu
    sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus
    nec turpis vel, semper malesuada ante, metus ac nisl bibendum.</p>
</body>
</html>

jQuery wrap() metoda

jQuery metoda wrap() koristi se za omotavanje HTML strukture oko odabranih elemenata. jQuery kod u sljedećem primjeru će omotati elemente container elementom <div> s pripremljenom klasom .wrapper na dokumentu, dok će sav unutrašnji sadržaj elemenata pasusa prvo zamotati sa <b>, a opet s <em> elementom.

<script>
$(document).ready(function(){
    // Zamotajte elemente containerom s HTML klase
    $(".container").wrap('<div class="wrapper"></div>');
    
    // Zamotaj sadržaj paragrafa s HTML -om
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omotavanje HTML-a oko elemenata u jQueryju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Omotavanje div containera s drugim divom na dokumentu
    $(".container").wrap('<div class="wrapper"></div>');
    
    // Zamotajte sadržaj paragrafa na klik
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>
<style>
    .wrapper{
        padding: 20px;
        background: #f0e68c;
        margin: 10px 0;
    }
    .container{
        padding: 15px;
        background: #fff;
        font-size: 24px;
    }
</style>
</head>
<body>
    <button type="button">Omotavanje demo teksta</button>
    <div class="container">
        <p>Ovo je neki demo tekst.</p>
    </div>
</body>
</html>