Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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ť:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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:

Tvoja stránka
localhost

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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 990x (7.47 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Predchádzajúci článok
Úvod do jQuery
Všetky články v sekcii
Základy jQuery
Preskočiť článok
(neodporúčame)
Nahradzovanie obsahu &amp; klonovania v jQuery (DOM)
Článok pre vás napísal Honza Bittner
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity