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:
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:
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:
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:
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
ka
a.appendTo(b)
- připojía
kb
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:
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:
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:
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:
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:
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
poa
. Elementa
je cíl,b
je vkládaný elementa.insertAfter(b)
- vložía
pob
. Elementa
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:
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:
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:
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:
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:
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:
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:
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 997x (7.47 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript