JQuery - att lägga till element - Versionshistorik

PGJ: /* Att lägga till ett redan existerande element */

2019-02-10T09:32:57Z

Att lägga till ett redan existerande element

← Äldre version		Versionen från 10 februari 2019 kl. 09.32
Rad 33:		Rad 33:
	Vi letar först på ett element i DOM. Vi väljer det första <code>[[p]]</code>-elementet. Vi söker sedan ut <code>[[section]]</code> och säger åt jQuery att lägga till elementet sist i sektionen. Men vad händer nu? Jo, vårt första stycke förflyttades sist i sektionen. Elementet är ju kopplat till en position i DOM, men när vi kör <code>append</code> så skrivs elementets gamla position över av den nya positionen (något av en förenkling av vad som händer). Därmed förflyttas alltså elementet till slutet.		Vi letar först på ett element i DOM. Vi väljer det första <code>[[p]]</code>-elementet. Vi söker sedan ut <code>[[section]]</code> och säger åt jQuery att lägga till elementet sist i sektionen. Men vad händer nu? Jo, vårt första stycke förflyttades sist i sektionen. Elementet är ju kopplat till en position i DOM, men när vi kör <code>append</code> så skrivs elementets gamla position över av den nya positionen (något av en förenkling av vad som händer). Därmed förflyttas alltså elementet till slutet.

	~~<div class="well well-meadow">~~
	Man får ''inte'' detta förflyttningsproblem om man skickar in en sträng istället för ett element. I sträng-fallet, skapas ett nytt element för varje tilläggning. Så även om du kör en selektor som matchar flera element, så kommer det att skapas nya underelement för varje "tilläggning". Vi kör ett exempel på detta.		Man får ''inte'' detta förflyttningsproblem om man skickar in en sträng istället för ett element. I sträng-fallet, skapas ett nytt element för varje tilläggning. Så även om du kör en selektor som matchar flera element, så kommer det att skapas nya underelement för varje "tilläggning". Vi kör ett exempel på detta.
	<codepen pen="BjRqdQ" tab="js,result" height="400">		<codepen pen="BjRqdQ" tab="js,result" height="400">
Rad 39:		Rad 38:

	När exempelkoden körs, så skapas alltså inte bara ett element ifrån strängen. Istället skapas ett nytt element för varje matchning som sker.		När exempelkoden körs, så skapas alltså inte bara ett element ifrån strängen. Istället skapas ett nytt element för varje matchning som sker.
	~~</div>~~

	== <code>clone</code> ==		== <code>clone</code> ==

PGJ: /* before */

2019-01-12T20:59:09Z

before

← Äldre version		Versionen från 12 januari 2019 kl. 20.59
Rad 106:		Rad 106:

	Vi kör ett exempel på detta:		Vi kör ett exempel på detta:
	<codepen pen="rxmqmr" tab="js" height="400">		<codepen pen="rxmqmr" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* after */

2019-01-12T20:58:53Z

after

← Äldre version		Versionen från 12 januari 2019 kl. 20.58
Rad 97:		Rad 97:

	Vi kör ett exempel.		Vi kör ett exempel.
	<codepen pen="eJWPvr" tab="js" height="400">		<codepen pen="eJWPvr" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* prepend */

2019-01-12T20:58:39Z

prepend

← Äldre version		Versionen från 12 januari 2019 kl. 20.58
Rad 86:		Rad 86:

	Vi modifierar ett av våra tidigare exempel och använder <code>prepend</code> istället för <code>append</code>.		Vi modifierar ett av våra tidigare exempel och använder <code>prepend</code> istället för <code>append</code>.
	<codepen pen="qbmJag" tab="js" height="400">		<codepen pen="qbmJag" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Att ändra innehållet i en mall */

2019-01-12T20:58:21Z

Att ändra innehållet i en mall

← Äldre version		Versionen från 12 januari 2019 kl. 20.58
Rad 75:		Rad 75:

	Nu fick vi ju kod som var relativt likformig och vi bör förstås göra om det hela till en funktion och på så vis förenkla hanteringen av våra mallar. Vi ska titta på ett till exempel, där vi gjort lite mer omfattande mallar samt en funktion som hanterar dessa.		Nu fick vi ju kod som var relativt likformig och vi bör förstås göra om det hela till en funktion och på så vis förenkla hanteringen av våra mallar. Vi ska titta på ett till exempel, där vi gjort lite mer omfattande mallar samt en funktion som hanterar dessa.
	<codepen pen="JGNmGe" tab="js,result" height="~~400~~">		<codepen pen="JGNmGe" tab="js,result" height="450">
	</codepen>		</codepen>

PGJ: /* clone */

2019-01-12T20:57:58Z

clone

← Äldre version		Versionen från 12 januari 2019 kl. 20.57
Rad 55:		Rad 55:

	Ett annat problem som kan uppträda är följande:		Ett annat problem som kan uppträda är följande:
	<codepen pen="ZQKMNX" tab="js,result" height="~~400~~">		<codepen pen="ZQKMNX" tab="js,result" height="450">
	</codepen>		</codepen>

PGJ: /* clone */

2019-01-12T20:57:28Z

clone

← Äldre version		Versionen från 12 januari 2019 kl. 20.57
Rad 45:		Rad 45:

	Kopior skapar man med metoden <code>clone</code>. Denna metod skapar en mer eller mindre exakt kopia av det angivna elementet. Vi ändrar vårt exempel till att använda <code>clone</code>.		Kopior skapar man med metoden <code>clone</code>. Denna metod skapar en mer eller mindre exakt kopia av det angivna elementet. Vi ändrar vårt exempel till att använda <code>clone</code>.
	<codepen pen="QyvVPK" tab="js" height="400">		<codepen pen="QyvVPK" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 55:		Rad 55:

	Ett annat problem som kan uppträda är följande:		Ett annat problem som kan uppträda är följande:
	<codepen pen="ZQKMNX" tab="js" height="400">		<codepen pen="ZQKMNX" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 62:		Rad 62:
	=== Att komma runt dupliceringsproblemet ===		=== Att komma runt dupliceringsproblemet ===
	Hur kan man då komma runt dupliceringsproblemet? Vi måste på något sätt se till att vår selektor får ett mer specifikt urval, så att enbart mallen väljs ut. Kanske provar man att sätta om så att mall-elementet har en ID istället, dessa ska ju vara unika. Men då kommer man att upptäcka att även ID:t kopieras, så vi får flera element med samma ID. Något som egentligen inte webbläsaren borde gilla, men de flesta webbläsare beter sig vara som om det vore en klass. Så det hjälper inte i detta fall. En bättre, och fungerande, lösning är att samla mallarna i en egen mall-sektion och välja ut dem baserat på var de ligger. Vi gör om vårt exempel:		Hur kan man då komma runt dupliceringsproblemet? Vi måste på något sätt se till att vår selektor får ett mer specifikt urval, så att enbart mallen väljs ut. Kanske provar man att sätta om så att mall-elementet har en ID istället, dessa ska ju vara unika. Men då kommer man att upptäcka att även ID:t kopieras, så vi får flera element med samma ID. Något som egentligen inte webbläsaren borde gilla, men de flesta webbläsare beter sig vara som om det vore en klass. Så det hjälper inte i detta fall. En bättre, och fungerande, lösning är att samla mallarna i en egen mall-sektion och välja ut dem baserat på var de ligger. Vi gör om vårt exempel:
	<codepen pen="bEWmNe" tab="js" height="400">		<codepen pen="bEWmNe" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 69:		Rad 69:
	=== Att ändra innehållet i en mall ===		=== Att ändra innehållet i en mall ===
	När vi hanterar mallar, så är det ju oftast för att vi vill ha många element av samma sort, men vi vill ha olika innehåll i varje kopia. Detta gör vi enklast genom att ändra på innehållet innan vi lägger till det i DOM:en igen.		När vi hanterar mallar, så är det ju oftast för att vi vill ha många element av samma sort, men vi vill ha olika innehåll i varje kopia. Detta gör vi enklast genom att ändra på innehållet innan vi lägger till det i DOM:en igen.
	<codepen pen="bEWmVw" tab="js" height="400">		<codepen pen="bEWmVw" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 75:		Rad 75:

	Nu fick vi ju kod som var relativt likformig och vi bör förstås göra om det hela till en funktion och på så vis förenkla hanteringen av våra mallar. Vi ska titta på ett till exempel, där vi gjort lite mer omfattande mallar samt en funktion som hanterar dessa.		Nu fick vi ju kod som var relativt likformig och vi bör förstås göra om det hela till en funktion och på så vis förenkla hanteringen av våra mallar. Vi ska titta på ett till exempel, där vi gjort lite mer omfattande mallar samt en funktion som hanterar dessa.
	<codepen pen="JGNmGe" tab="js" height="400">		<codepen pen="JGNmGe" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Att lägga till ett redan existerande element */

2019-01-12T20:56:50Z

Att lägga till ett redan existerande element

← Äldre version		Versionen från 12 januari 2019 kl. 20.56
Rad 35:		Rad 35:
	<div class="well well-meadow">		<div class="well well-meadow">
	Man får ''inte'' detta förflyttningsproblem om man skickar in en sträng istället för ett element. I sträng-fallet, skapas ett nytt element för varje tilläggning. Så även om du kör en selektor som matchar flera element, så kommer det att skapas nya underelement för varje "tilläggning". Vi kör ett exempel på detta.		Man får ''inte'' detta förflyttningsproblem om man skickar in en sträng istället för ett element. I sträng-fallet, skapas ett nytt element för varje tilläggning. Så även om du kör en selektor som matchar flera element, så kommer det att skapas nya underelement för varje "tilläggning". Vi kör ett exempel på detta.
	<codepen pen="BjRqdQ" tab="js,result" height="~~200~~">		<codepen pen="BjRqdQ" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Att lägga till flera element samtidigt */

2019-01-12T20:56:21Z

Att lägga till flera element samtidigt

← Äldre version		Versionen från 12 januari 2019 kl. 20.56
Rad 21:		Rad 21:

	Om man vill kan man skicka med flera inparametrar till <code>append</code>. Den kommer då att lägga till det som specificeras i parametrarna, en efter en. Ett exempel på det kan vara:		Om man vill kan man skicka med flera inparametrar till <code>append</code>. Den kommer då att lägga till det som specificeras i parametrarna, en efter en. Ett exempel på det kan vara:
	<codepen pen="wMdERa" tab="js,result" height="~~400~~">		<codepen pen="wMdERa" tab="js,result" height="450">
	</codepen>		</codepen>

PGJ: /* Alla element är likvärdiga */

2019-01-12T20:56:05Z

Alla element är likvärdiga

← Äldre version		Versionen från 12 januari 2019 kl. 20.56
Rad 13:		Rad 13:
	=== Alla element är likvärdiga ===		=== Alla element är likvärdiga ===
	Vi lägger till lite mer kod i vårt exempel för att illustrera att DOM:en inte gör skillnad på var elementet kommer ifrån.		Vi lägger till lite mer kod i vårt exempel för att illustrera att DOM:en inte gör skillnad på var elementet kommer ifrån.
	<codepen pen="pgPOQR" tab="js,result" height="~~320~~">		<codepen pen="pgPOQR" tab="js,result" height="400">
	</codepen>		</codepen>