IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.

Lekce 2 - Vkládání obsahu v jQuery (DOM)

V minulé lekci, Úvod do jQuery, jsme si uvedli javascriptovou knihovnu jQuery a vytvořili v ní první jednoduchou webovou aplikaci.

V dnešním tutoriálu si ukážeme, jak pomocí jQuery vkládat nový obsah do stránky, vyzkoušíme si i různé možnosti na příkladech.

Začneme tím, že si vytvoříme HTML soubor a JS soubor.

Do JS si vložíme základní kostru, oproti minulé lekci použijeme zkrácený zápis události Document Ready.

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

Vkládání dovnitř elementu

Vkládáním do elementu rozumíme vložit nějaký obsah jako nového potomka elementu, který vybereme nějakým selektorem. Potomka můžeme přidat na konec nebo na začátek. Máme na to několik metod, které si postupně ukážeme.

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

Pro tuto část si vytvoříme HTML kód jako je níže, jedná se o několik divů, uzavřený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 přidat i nějaké styly:

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ýsledek v prohlížeči:

Tvoje stránka
localhost

html() a text()

Tyto dvě metody nám vyberou nebo nastaví obsah celého elementu. Metoda html() pracuje s HTML kódem zatímco text() nastavuje nebo vrací pouze textový obsah.

Udělejme si ukázku. Vyberme si v našem kódu první <div> pomocí selektoru #vkladani .one, ten bude náš zdroj obsahu. Uložíme si jej tedy do proměnné zdroj.

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

Nyní již můžeme vyzkoušet metodu html(). Zkusme získat ze zdroje HTML kód jeho obsahu a nastavit ho jako HTML kód obsahu druhého divu, jehož selektor bude #vkladani .two.

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

Výsledek:

Tvoje stránka
localhost

Obsah se samozřejmě z prvního divu do druhého zkopíroval a to i s vnořenými HTML značkami, takže nám zvýraznění zůstalo. Nyní si zkusíme udělat to samé, ale metodou text(). Výsledek vložíme jako obsah třetímu divu (div.three).

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

Výsledek:

Tvoje stránka
localhost

Získán byl tentokrát pouze textový obsah elementu bez HTML značek a tedy bez zvýraznění. Tyto dvě metody můžeme také nakombinovat, můžeme vložit HTML obsahu zdroje jako 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ýsledek:

Tvoje stránka
localhost

Toto už je zajímavé. Ze zdroje jsme získali HTML kód jeho obsahu a vložili jej jako text do čtvrtého divu. Kromě textu se nám zobrazily i HTML značky. To je asi vše, co můžeme s těmito funkcemi dělat.

append() a appendTo()

Append znamená v překladu připojit, takže asi tušíme, že metody připojí nějaký element k obsahu jiného. Obě dělají podobnou věc, je mezi nimi ovšem jeden zásadní rozdíl.

  • a.append(b) - připojí b k a
  • a.appendTo(b) - připojí a k b

Nyní, když víme co metody dělají, si je můžeme vyzkoušet na našem příkladu. Připojíme "<b>Ahoj, já jsem APPENDED</b>" k divu #vkladani .three. V divu ponecháme i obsah z minulé ukázky.

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ýsledek:

Tvoje stránka
localhost

Skvělé, to nám funguje. Nyní uděláme to samé s appendTo(), jen si místo 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ýsledek:

Tvoje stránka
localhost

Vidíme, že nám i toto funguje. Zkusíme si tedy připojit 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ýsledek:

Tvoje stránka
localhost

Vložil se celý element #vkladani .three. Pokud bychom chtěli připojit jen jeho obsah, pomůže nám k tomu metoda 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ýsledek:

Tvoje stránka
localhost

Nesmíme ale zapomenout, že nám nyní ve stránce zůstane i původní #vkladani .two .

prepend() a prependTo()

Metoda prepend() dělá to samé jako append(), jen s tím rozdílem, že nám element vloží na začátek obsahu. Jako ukázku si můžeme vložit na začátek #vkladani .one třeba #vkladani .four.

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

Výsledek:

Tvoje stránka
localhost

Vkládání kolem elementu

Nyní si zakomentujeme v JavaScriptu náš append a preppend kód, abychom neměli ukázku tak přeplácanou. jQuery nabízí také funkce, které vloží obsah vedle našeho elementu, tedy ne do něj. Jsou to funkce after(), insertAfter(), before() a insertBefore().

after() a insertAfter()

After znamená po, vkládá tedy jiný element za daný element. Rozdíl mezi after() a insertAfter() je následující:

  • a.after(b) - vloží b po a. Element a je cíl, b je vkládaný element
  • a.insertAfter(b) - vloží a po b. Element a vkládáme, b je cíl

Zkusíme si tedy přidat po divu #vkladani .one nový <div>, který bude obsahovat "Ahoj, jsem vložený přes After". Novému divu přidáme ještě id="pres_after", jelikož s ním budeme pracovat dále.

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

Výsledek:

Tvoje stránka
localhost

Skvělé, funguje to. Hned za #vkladani .one se nám vložil náš div. Nyní zkusíme náš nový <div> s id="pres_after" vložit za #vkladani .two.

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

Výsledek:

Tvoje stránka
localhost

before() a insertBefore()

Tyto metody fungují podobně jako výše zmíněné after() a insertAfter(), pouze obsah vkládají před element. Zkusme si ale něco jiného. Vytvoříme si <div> s id="pres_before" a vložíme jej před náš <div> #pres_after.

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

Povedlo se. Takto by to mělo vypadat:

Tvoje stránka
localhost

Obalení elementu

Dobře, ale co když budeme chtít náš element obalit jiným elementem? Na to nám slouží několik další metod. Jsou to wrap(), unwrap(), wrapAll() a wrapInner().

Všem metodám můžeme předat jako parametr nový element nebo nějaký již existující element. Pokud zadáme nějaký již existující element, tento element na stránce zůstane a náš element (elementy) nám zabalí do jeho kopie, tzn. i vše co má v sobě.

wrap()

Metoda wrap() nám obalí náš element nějakým jiným elementem, dokonce jich může být i více. Použití je opět velmi jednoduché. Zabalme si tedy např. <div> #pres_before** elementu <article> a ten zabalme do <section>.

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

Výsledek:

Tvoje stránka
localhost

Pokud tedy chcete zabalit do více elementů, přidávejte je tímto stylem. Obalení si můžeme zkusit i třeba s ještě více elementy:

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

unwrap()

Metoda unwrap() je opakem wrap(). Elementy okolo našeho elementu nebo elementů tedy odebírá. Zapisuje se stejným způsobem jako wrap(). Pojďme si odebrat <article> kolem našeho divu #pres_before.

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

Voilà, article okolo odstraněn.

Výsledek:

Tvoje stránka
localhost

wrapAll()

Metoda wrapAll() najde všechny elementy, které odpovídají danému selektoru, a obalí je dohromady. Všechny výsledky spojí a vloží je do nového společného rodiče.

Vytvořme si div.gray v #vkladani a pojďme si to zkusit! Co obalit např. #pres_after a #vkladani .four?

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

Výsledek:

Tvoje stránka
localhost

Původní .gray (zkuste si do něj vložit nějaký text) nám zůstane a jeho kopie nám obalila náš výběr.

wrapInner()

Jako poslední zde máme wrapInner(), který, jak jste jistě vydedukovali, obalí vnitřek elementu. Přidá tedy potomka, do kterého se vloží zbytek obsahu.

Zkusme si vytvořit potomka pro #pres_after, který se bude jmenovat div.red a bude nastavovat červené pozadí a nějaký margin.

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

Výsledek:

Tvoje stránka
localhost

To je pro dnešní lekci vše :)

V příští lekci, Nahrazování obsahu & klonování v jQuery (DOM), se budeme věnovat nahrazování obsahu a klonování.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 989x (7.47 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Úvod do jQuery
Všechny články v sekci
jQuery - Dynamické doplňky webu snadno a rychle
Přeskočit článek
(nedoporučujeme)
Nahrazování obsahu & klonování v jQuery (DOM)
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
133 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity