Akce! Dobij si body, napiš nám do zpráv "Přes léto se to naučím!" a dobijeme ti ještě navíc 50% z této částky! Sleva na výuku platí do 22.6.2018.

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

JavaScript jQuery Vkládání obsahu v jQuery (DOM)

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
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:

Your page
localhost

To by bylo vše k vkládání obsahu a dnešnímu tutoriálu vše. V příští lekci, Nahrazování obsahu & klonování v jQuery (DOM), se budeme věnovat nahrazování obsahu a klonování.


 

Stáhnout

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

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
33 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Úvod do jQuery
Miniatura
Všechny články v sekci
Základy jQuery
Aktivity (5)

 

 

Komentáře
Zobrazit starší komentáře (12)

Avatar
Jurajs
Člen
Avatar
Jurajs:3.11.2016 23:11

Zkoušel jsem to a vysledek je:

<div id="text" style="position:absolute;">Text ktery se animuje</div>
<div id="myId"></div>

//JQUERY

            $(function(){
             $("#myId").append("Ahoj ja jsem Append").insertBefore("#text");
            });

Dal jsem to bez toho appendTo, dal jsem tam jen append.... a vysledek je:

Ahoj ja jsem Append
Text ktery se animuje

Tak nevim jestli to to nějak pomuze :)

 
Odpovědět 3.11.2016 23:11
Avatar
radian1
Člen
Avatar
radian1:16.4.2017 17:17

Ahoj, proč mi nejde připojit 3. ke druhému? Co je na tom špatně?

$(function(){
   var 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 APPEND</b>");
   $("<i>Ahoj, já jsem appendTo</i>").appendTo('#vkladani .three');
   $( $('#vkladani .two').html() ).appendTo( $('#vkladani .three') );

// následující kód nefunguje
   $( $('#vkladani .three').html() ).appendTo( $('#vkladani .two') );
});
Editováno 16.4.2017 17:18
 
Odpovědět 16.4.2017 17:17
Avatar
Jurajs
Člen
Avatar
Odpovídá na radian1
Jurajs:18.4.2017 16:00

Ahoj, zkus se kouknout na tohle a uvidis kde mas chybu https://codepen.io/anon/pen/MmaVyp
Na posledním radku to mas spatne :)

//prekontroluj si to radek po radku

var 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 APPEND</b>");
$("<i>Ahoj, já jsem APPENDTO</i>").appendTo('#vkladani .three');
$('#vkladani .two').appendTo( $('#vkladani .three') );
$( $('#vkladani .two').html() ).appendTo( $('#vkladani .three') ); // tady je chyba :)
 
Odpovědět 18.4.2017 16:00
Avatar
Libor Sitek
Člen
Avatar
Libor Sitek:12.5.2017 21:32

Ahoj, nevím proč, ale nefungoval mi tenhle řádek:

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

Prohlížeč mi ho zkousl až po menší úpravě:

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

Pak ještě moc nerozumím tomuto zápisu:
A.after(B) - vloží A po B
A.insertAfter(B) - vloží B po A

Podle příkladu se při použití after element B vloží za element A, a při použití insertAfter se element A vloží za element B, takže to spíše chápu takto:
A.after(B) - vloží B za A
A.insertAfter(B) - vloží A za B

Odpovědět 12.5.2017 21:32
Když se chce, hledá se jak, když se nechce, hledá se proč
Avatar
arnost99
Člen
Avatar
arnost99:20.10.2017 1:40

Ahoj, proč funguje tento zápis:

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

A nefunguje tento:

$("Ahoj, já jsem APPENDTO").appendTo('#vkladani .three');

Nedává mi to logiku? Nebo je pravidlo, že text musí být vždy obalen "nějakým" tagem?
Díky za vysvětlení

 
Odpovědět 20.10.2017 1:40
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na arnost99
Honza Bittner:20.10.2017 8:58

Myslím, že to prostě pracuje jen s elementy, resp. s HTML stringem. Což samotný text není. Viz dokumentace http://api.jquery.com/appendto/

Odpovědět  +2 20.10.2017 8:58
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Koníček:19.12.2017 12:41

Není tohle přesně naopak?
A.after(B) - vloží A po B
A.insertAfter(B) - vloží B po A

Nebo jsem tak natvrdlej?

Odpovědět 19.12.2017 12:41
Věř, běž a dokážeš!
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na David Koníček
Honza Bittner:19.12.2017 12:56

Hmm,

$(target).after(con­tentToBeInser­ted)
$(contentToBe­Inserted).inser­tAfter(target)

Opravdu by to spíše mělo být popsáno v této části opačně. V popisku už to sedí snad správně, ale tento úvod vypadá, že je opačně, opravdu. Díky, napravím.

Odpovědět 19.12.2017 12:56
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
David Koníček:19.12.2017 13:01

Chce to opravit i ten příklad, protože takhle nebude fungovat tak jak má ;) Ale jinak pěkný díl ;)

Odpovědět 19.12.2017 13:01
Věř, běž a dokážeš!
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na David Koníček
Honza Bittner:19.12.2017 13:06

Dohromady to bude nějak takto. Popisky (myslím ty věty nad kódy) jsou IMO dobře. Jen ty vysvětlení nahoře byla špatně.

Viz (po úpravě, která čeká na schválení):

A.after(B) - vloží B po A – A je cíl, B je obsah pro vložení

Zkusíme si tedy přidat po #vkladani .one div, který bude obsahovat "Ahoj, jsem vložený přes After". Divu přidáme ještě ID, jelikož s ním budeme pracovat dále.

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


A.insertAfter(B) - vloží A po B – B je cíl, A je obsah pro vložení

Super, funguje to. Hned za #vkladani .one se nám vložil náš div. Teď zkusíme náš #pres_after vložit za #vkladani .two.

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

Odpovědět  +1 19.12.2017 13:06
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 22. Zobrazit vše