2. diel - Vkladanie obsahu v jQuery (DOM)

V minulej lekcii, Úvod do jQuery , sme si uviedli javascriptovú knižnicu jQuery a vytvorili v nej prvej jednoduchú webovú aplikáciu. V dnešnom tutoriále si ukážeme ako pomocou jQuery vkladať nový obsah do stránky, vyskúšame si aj rôzne možnosti na príkladoch.

Začneme tým, že si vytvoríme HTML súbor a JS súbor.

Do JS si vložíme základnú kostru, oproti minulej lekcii použijeme skrátený zápis udalosti Document Ready.

$(function() {
    // Kód, který se spustí až po načtení stránky
});

Vkladanie dovnútra elementu

Vkladaním do elementu rozumieme vložiť nejaký obsah ako nového potomka elementu, ktorý vyberieme nejakým selektorom. Potomka môžeme pridať na koniec alebo na začiatok. Máme na to niekoľko metód, ktoré si postupne ukážeme.

Sú to html(), text(), append(), appendTo(), prepend() a prependTo().

Pre túto časť si vytvoríme HTML kód ako je nižšie, jedná sa o niekoľko divov, uzavretých v divu s id="vkladani".

<div id="vkladani">
    <div class="one">
        <b>Lorem ipsum <i>dolor sit amet</i></b>, consectetur adipisicing <s>elit</s>, sed do eiusmod tempor <b>incididunt</b> ut <b>labore</b> et dolore <u>magna aliqua</u>. Ut enim ad <i>minim veniam</i>.
    </div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

Môžeme pridať aj nejaké štýly:

body {
   background: #eee;
   color: #3d3d3d;
   margin: 0px;
   font-family: 'Advent pro';
}

#vkladani div {
   margin: 15px 0 15px 4%;
   padding: 2%;
   background: #fff;
   width: 40%;
   float: left;
}

#vkladani .gray {
   background: #cacaca;
   width: 300px;
   padding: 20px;
   min-height: 100px;
}

#vkladani .red {
   background: red;
   width: 80%;
   margin: 8%;
   padding: 2%;
}

Výsledok v prehliadači:

html() a text()

Tieto dve metódy nám vyberú alebo nastaví obsah celého elementu. Metóda html() pracuje s HTML kódom zatiaľ čo text() nastavuje alebo vracia iba textový obsah.

Urobme si ukážku. Vyberme si v našom kóde prvej <div> pomocou selektora #vkladani .one, ten bude náš zdroj obsahu. Uložíme si ho teda do premennej zdroj.

let zdroj = $('#vkladani .one');

Teraz už môžeme vyskúšať metódu html(). Skúsme získať zo zdroja HTML kód jeho obsahu a nastaviť ho ako HTML kód obsahu druhého divu, ktorého selektor bude #vkladani .two.

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());

výsledok:

Obsah sa samozrejme z prvého divu do druhého skopíroval a to aj s vnorenými HTML značkami, takže nám zvýraznenie zostalo. Teraz si skúsime urobiť to isté, ale metódou text(). Výsledok vložíme ako obsah tretiemu divu (div.three).

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());
$('#vkladani .three').text(zdroj.text());

výsledok:

Získaný bol tentoraz iba textový obsah elementu bez HTML značiek a teda bez zvýraznenia. Tieto dve metódy môžeme tiež nakombinovať, môžeme vložiť HTML obsahu zdroja ako text do štvrtého divu (#vkladani .four).

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());
$('#vkladani .three').text(zdroj.text());
$('#vkladani .four').text(zdroj.html());

výsledok:

Toto už je zaujímavé. Zo zdroja sme získali HTML kód jeho obsahu a vložili ho ako text do štvrtého divu. Okrem textu sa nám zobrazili aj HTML značky. To je asi všetko, čo môžeme s týmito funkciami robiť.

append() a appendTo()

Append znamená v preklade pripojiť, takže asi tušíme, že metódy pripojí nejaký element k obsahu iného. Obe robia podobnú vec, je medzi nimi však jeden zásadný rozdiel.

• a.append(b) - pripojí b k a
• a.appendTo(b) - pripojí a k b

Teraz, keď vieme čo metódy robia, si ich môžeme vyskúšať na našom príklade. Pripojíme "<b>Ahoj, já jsem APPENDED</b>" k divu #vkladani .three. V divu ponecháme aj obsah z minulej ukážky.

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());
$('#vkladani .three').text(zdroj.text());
$('#vkladani .four').text(zdroj.html());

$('#vkladani .three').append("<b>Ahoj, já jsem APPENDED</b>");

výsledok:

Skvelé, to nám funguje. Teraz urobíme to isté s appendTo(), len si miesto tučného písma nastavíme kurzívu.

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());
$('#vkladani .three').text(zdroj.text());
$('#vkladani .four').text(zdroj.html());

$('#vkladani .three').append("<b>Ahoj, já jsem APPENDED</b>");
$("<i>Ahoj, já jsem APPENDEDTO</i>").appendTo('#vkladani .three');

výsledok:

Vidíme, že nám i toto funguje. Skúsime si teda pripojiť div #vkladani .two k divu #vkladani .three.

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());
$('#vkladani .three').text(zdroj.text());
$('#vkladani .four').text(zdroj.html());

$('#vkladani .three').append("<b>Ahoj, já jsem APPENDED</b>");
$("<i>Ahoj, já jsem APPENDEDTO</i>").appendTo('#vkladani .three');
$('#vkladani .two').appendTo($('#vkladani .three'));

výsledok:

Vložil sa celý element #vkladani .three. Ak by sme chceli pripojiť len jeho obsah, pomôže nám k tomu metóda html().

let zdroj = $('#vkladani .one');
$('#vkladani .two').html(zdroj.html());
$('#vkladani .three').text(zdroj.text());
$('#vkladani .four').text(zdroj.html());

$('#vkladani .three').append("<b>Ahoj, já jsem APPENDED</b>");
$("<i>Ahoj, já jsem APPENDEDTO</i>").appendTo('#vkladani .three');
$($('#vkladani .two').html()).appendTo($('#vkladani .three'));

výsledok:

Nesmieme ale zabudnúť, že nám teraz v stránke zostane aj pôvodný #vkladani .two.

prepend() a prependTo()

Metóda prepend() robí to isté ako append(), len s tým rozdielom, že nám element vloží na začiatok obsahu. Ako ukážku si môžeme vložiť na začiatok #vkladani .one treba #vkladani .four.

$('#vkladani .one').prepend($('#vkladani .four'));

výsledok:

Vkladanie okolo elementu

Teraz si zakomentujeme v JavaScripte náš append a preppend kód, aby sme nemali ukážku tak preplácané. jQuery ponúka aj funkcie, ktoré vloží obsah vedľa nášho elementu, teda nie do neho. Sú to funkcia after(), insertAfter(), before() a insertBefore().

after() a insertAfter()

After znamená po, vkladá teda iný element za daný element. Rozdiel medzi after() a insertAfter() je nasledovné:

• a.after(b) - vloží b po a. Element a je cieľ, b je vkladaný element
• a.insertAfter(b) - vloží a po b. Element a vkladáme, b je cieľ

Skúsime si teda pridať po divu #vkladani .one nový <div>, ktorý bude obsahovať "Ahoj, jsem vložený přes After". Novému divu pridáme ešte id="pres_after", pretože s ním budeme pracovať ďalej.

$('#vkladani .one').after("<div id='pres_after'>Ahoj, jsem vložený přes <b>.after()</b></div>");

výsledok:

Skvelé, funguje to. Hneď za #vkladani .one sa nám vložil náš div. Teraz skúsime náš nový <div> s id="pres_after" vložiť za #vkladani .two.

$('#pres_after').insertAfter($('#vkladani .two'));

výsledok:

before() a insertBefore()

Tieto metódy fungujú podobne ako vyššie spomínané after() a insertAfter(), iba obsah vkladajú pred element. Skúsme si ale niečo iné. Vytvoríme si <div> s id="pres_before" a vložíme ho pred náš <div> #pres_after.

$('#pres_after').before("<div id='pres_before'>Ahoj, jsem vložený přes <b>.before()</b></div>");

Podarilo sa. Takto by to malo vyzerať:

Obalenie elementu

Dobre, ale čo keď budeme chcieť náš element obaliť iným elementom? Na to nám slúži niekoľko ďalšie metód. Sú to wrap(), unwrap(), wrapAll() a wrapInner().

Všetkým metódam môžeme odovzdať ako parameter nový element alebo nejaký už existujúce element. Ak zadáme nejaký už existujúci element, tento element na stránke zostane a náš element (elementy) nám zabalí do jeho kópie, tzn. aj všetko čo má v sebe.

wrap()

Metóda wrap() nám obalí náš element nejakým iným elementom, dokonca ich môže byť aj viac. Použitie je opäť veľmi jednoduché. Zabaľte si teda napr. <div> #pres_before** elementu <article> a ten zabaľme do <section>.

$('#pres_before').wrap('<section><article></article></section>');

výsledok:

Ak teda chcete zabaliť do viacerých elementov, pridávajte je týmto štýlom. Obalenie si môžeme skúsiť i napríklad s ešte viac elementy:

$('#pres_before').wrap( "<div><div><p><em><b></b></em></p></div></div>" );

unwrap()

Metóda unwrap() je opakom wrap(). Elementy okolo nášho elementu alebo elementov teda odoberá. Zapisuje sa rovnakým spôsobom ako wrap(). Poďme si odobrať <article> okolo nášho divu #pres_before.

$('#pres_before').unwrap('<article></article>');

Voilà, article okolo odstránený.

výsledok:

wrapAll()

Metóda wrapAll() nájde všetky elementy, ktoré zodpovedajú danému selektoru, a obalí ich dohromady. Všetky výsledky spojí a vloží ich do nového spoločného rodičia.

Vytvorme si div.gray v #vkladani a poďme si to skúsiť! Čo obaliť napr. #pres_after a #vkladani .four ?

$('#pres_after, #vkladani .four').wrapAll($('.gray'));

výsledok:

Pôvodný .gray (skúste si do neho vložiť nejaký text) nám zostane a jeho kópia nám obalila náš výber.

wrapInner()

Ako posledný tu máme wrapInner(), ktorý, ako ste iste vydedukovali, obalí vnútro elementu. Pridá teda potomka, do ktorého sa vloží zvyšok obsahu.

Skúsme si vytvoriť potomka pre #pres_after, ktorý sa bude volať div.red a bude nastavovať červené pozadie a nejaký margin.

$('#pres_after').wrapInner('<div class="red"></div>');

výsledok:

To by bolo všetko k vkladanie obsahu a dnešnému tutoriálu všetko. V budúcej lekcii, Nahradzovanie obsahu & klonovania v jQuery (DOM) , sa budeme venovať nahrádzanie obsahu a klonovanie.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.