3. díl - 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 tomto článku si ukážeme jak můžeme manipulovat s jQuery pomocí vkládání obsahu, 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.

$(function(){
  ... kód ...
});

Vkládání do elementu

Vkládáním do elementu rozumíme vložit nějaký obsah jako potomka selektoru, připsat ho na konec, nebo na začátek. Máme na to několik funkcí, které si následně ukážeme.

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

Pro tuto část si vytvoříme html kód jako je níže.

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

.html() a .text()

Tyto dvě funkce nám vyberou nebo nastaví obsah celého elementu. .html() nám pracuje s html - tedy i s html znaky a .text() pracuje pouze s textem.

Ukážeme si ukázku, v našem kódu výše máme #vkladani .one, ten bude náš zdroj obsahu. Nastavíme si ho tedy na proměnnou zdroj.

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

Nyní už můžeme vyzkoušet .html(), vyzkoušíme si tedy získat z zdroje jeho html a nastavit ho jako html #vkladani .two.

$('#vkladani .two').html( zdroj.html() );

Samozřejmě nám to obsah okopírovalo, samozřejmě i s html značkami, takže nám zvýraznění zůstalo. Nyní si zkusíme udělat to samé, ale s jeho .text(). Výsledek vložíme do div.three.

$('#vkladani .three').text( zdroj.text() );

To nám vybralo jen jeho text a vložilo nám ho jako obsah, bez html značek a tedy bez zvýraznění. Tyto dvě funkce můžeme také nakombinovat, můžeme vložit html zdroje jako text #vkladani .four.

$('#vkladani .four').text( zdroj.html() );

Toto už je zajímavé, ze zdroje jsme získali jeho html a vložili ho jako text do 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. Ukážeme si ještě výsledek a jdeme na další funkce.

Manipulace s DOM v jQuery

.append() a .appendTo()

Append znamená v překladu připojit, takže asi tušíme co mají funkce za význam. Obě dělají podobnou věc, ale mají 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 dělají, si je můžeme vyzkoušet na našem příkladu.

Připojíme "Ahoj, já jsem APPEND" k #vkladani .three.

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

Super, 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.

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

Vidíme že nám i toto funguje, a zkusíme si tedy připojit #vkladani .two k #vkladani .three.

$('#vkladani .two').appendTo( $('#vkladani .three') );

Vložil se celý #vkladani .three. Pokud chceme jen jeho obsah, pomůže nám k tomu .html().

$( $('#vkladani .two').html() ).appendTo( $('#vkladani .three') );

Nesmíme ale zapomenout, že nám nyní originální #vkladani .two zůstane.

.prepend() a .prependTo()

Prepend dělá to samé jako append, jen s tím rozdílem, že nám vloží obsah na začátek. Na ukázku si můžeme vložit na začátek #vkladani .one třeba #vkladani .four

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

Naše append a prepend úpravy můžou vypadat takto.

Prepend a appendTo v jQuery

Vkládání kolem elementu

Nyní si zakomentujeme v JS náš append a preppend kód, abychom neměli ukázku tak přeplácanou.

jQuery nabízí také funkce, které vloží obsah vedle vašeho selektoru, tedy ne do něj. Jsou to funkce .after(), .insertAfter(), .before() a .insertBefore().

.after() a .insertAfter()

After znamená po, takže to přesně dělá. Vloží nám nějaký obsah po selektoru. Rozdíl mezi .after() a .insertAfter() je tento:

A.after(B) - vloží A po B

A.insertAfter(B) - vloží B po A

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'>Ahoj, jsem vložený přes <b>.after()</b></div>");

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') );

.before() a .insertBefore()

Tyto funkce fungují podobně jako výše zmíněné .after() a .insertAfter(), jen vkládají obsah před element. Zkusme si ale něco. Vytvoříme si div #pres_before a vložíme ho před náš #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.

Before a insertBefore v jQuery

Zabalení elementu

Dobře, ale co když budeme chtít přidat něco kolem našeho selektoru? Na to nám slouží pár další funkcí. Jsou to .wrap(), .unwrap(), .wrapAll() a .wrapInner().

Všem funkcím můžeme dát jako parametr nové elementy, nebo nějaký již hotový - selektorem. Pokud zadáme nějaký hotový - třeba $('#tento'), původní #tento nám zůstane a naše elementy nám zabalí jeho kopie, tzn. i vše co má v sobě.

.wrap()

Wrap nám obalí selektor nějakým elementem, dokonce může i více. Opět je to velmi jednoduché na použití. Zabalme si tedy třeba #pres_before do articlu a ten zabalme do section.

$('#pres_befo­re').wrap('<sec­tion><article></ar­ticle></secti­on>');

Takže, pokud chcete zabalit do více elementů, přidávejte je tímto stylem.

.unwrap()

Unwrap je opak .wrap(). Ten nám zase elementy okolo ubírá. Zapisuje se stejným stylem jako .wrap(), takže, pojďme si odebrat article kolem našeho #pres_before.

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

Voilà, article kolem odstraněn.

Zkuste si udělat třeba i více:

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

.wrapAll()

WrapAll najde všechny elementy, které odpovídají 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, nějak si ho ostylujte a pojďme si to zkusit! Co obalit třeba #pres_after a #vkladani .four?

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

Původní .gray (zkuste si vložit do něj 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, tzn. přidá potomka, do kterého se dá zbytek obsahu.

Zkusme si vytvořit potomka pro #pres_after, který se bude jmenovat div.red a bude dávat červené pozadí a bude mít trochu i margin.

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

To by bylo vše k vkládání obsahu, příště si ukážeme další super funkce.

jQuery a DOM

 

Stáhnout

Staženo 601x (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?
29 hlasů
Autor studuje FIT ČVUT. Zajímá se převážně o webové technologie. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Miniatura
Všechny články v sekci
Základy jQuery
Aktivity (1)

 

 

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

Avatar
balaz.marek94:28.7.2015 10:11

Super tutoriál! Zaujímalo by ma, či by sa funkcia .html() dala použiť aj na stránku napr. "www.google.sk" a nie len na elementy mojej stránky. Teda otázka znie, dá sa .html využiť aj na získanie html kódu z ľubovolnej URL a ak áno, tak môžem poprosiť jednoduchý príklad? :)

Editováno 28.7.2015 10:11
 
Odpovědět  +1 28.7.2015 10:11
Avatar
Mazwor
Člen
Avatar
Mazwor:6.3.2016 23:55

Ahoj, mám jen takový malý dotaz. Existuje nějaký reálný a využitelný důvod existence jak .append(), tak i .appendTo() + všech dalších analogických dvojic funkcí? Jako na začátečníka to na mě z tohoto tutoriálu působí tak, že jsou úplně stejné, jen nesmím zaměnit pořadí toho, co k čemu chci připojit...
Stačí mi tedy teoreticky si jen zvyknout na jednu z nich a používat ji celou dobu nebo lze nalézt situaci, kdy by byla využitelná jen jedna z těchto funkcí a druhá selhávala?
Díky moc za odpovědi a taky autorům za super sérii tutoriálů! :)

Odpovědět 6.3.2016 23:55
Pořádek je pro blbce, inteligent ovládá chaos. :D
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Mazwor
Honza Bittner:7.3.2016 16:28

Jak říkáš, jsou to funkce, které jsou velmi podobné a i zaměnitelné, avšak to jen pro jednoduché řešení.

Představ si, že si pomocí jQuery selektoru vybereš nějaký element, na který aplikuješ události, animace atp., které můžeš řetězit, tzn. psát všechno za sebe a spojovat to tečkou. Je v takovém případně už rozdíl znatelný? Já myslím že ano; nehledě tedy na to, jestli je vhodné a přehledné takto cokoli zapisovat.

Odpovědět 7.3.2016 16:28
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Mazwor
Člen
Avatar
Mazwor:8.3.2016 0:35

Máš pravdu, to řetězení mě nějak zrovna v ten moment nenapadlo, přitom je to docela pádný důvod.
Díky moc za osvětlení a rychlou odpověď :).

Odpovědět 8.3.2016 0:35
Pořádek je pro blbce, inteligent ovládá chaos. :D
Avatar
Jan Zamecnik
Člen
Avatar
Jan Zamecnik:2.11.2016 12:30

Mám dotaz.
Proč se mi vloží?

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

ale nevloží se:

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

Jaký tag mám použít?

Ale bez problému funguje bez tagu:

$('#vkladani .two').append("Ahoj, já jsem APPEND normal");

Tohle mě hlava nebere. Dík

 
Odpovědět 2.11.2016 12:30
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jan Zamecnik
Jurajs:2.11.2016 22:54

Ten kod musí být otočený, nikde jsem ještě neviděl to, jak to máš napsané ty.... :D :D

$('#vkladani' .four').appendTo("Ahoj, já jsem APPENDTO");
 
Odpovědět 2.11.2016 22:54
Avatar
Jan Zamecnik
Člen
Avatar
Odpovídá na Jurajs
Jan Zamecnik:3.11.2016 20:36

Syntaxe je správná, viz appendTo Ale nejede mi to bez tagů.

 
Odpovědět 3.11.2016 20:36
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jan Zamecnik
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. dubna 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. dubna 17:18
 
Odpovědět 16. dubna 17:17
Avatar
Jurajs
Člen
Avatar
Odpovídá na radian1
Jurajs:18. dubna 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. dubna 16:00
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 15. Zobrazit vše