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ží B po A – A je cíl, B je obsah pro přidání

A.insertAfter(B) - vloží A po B – A je obsah pro přidání, B je cíl

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

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 661x (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?
32 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
Všechny články v sekci
Základy jQuery
Aktivity (3)

 

 

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