Főoldalra

jQuery add() metódus


add() 	Hozzátesz elemeket, a kiválasztott elem vagy elemek készletéhez.

Megjegyzés: 
Korlátozottan, kiválasztott elemhez, stílust is hozzáadhatunk. (Lásd az oldal alján!)
Akkor megbízható add() metódus, ha a fájl tartalmát nem módosítjuk, vagy a manipulálandó elem, egyedi id azonosítóval rendelkezik.
Meglévő fáj tartalmát, módosítjuk:
Például egy új p elemet helyezünk el a dokumentum elején, akkor minden p elem index éréke megváltozik, és az add metódus által meghatározottak, 
nem az eredetileg kiválasztott elemre lesznek hatással.
Ekkor az eredetileg meghatározott $("p:eq(0)").add  vagy a  $("p:first").add meghatározást,
át kell írni $("p:eq(1)").add formátumra.


add() metódus, első teszt bemutató.

<script>
$(document).ready(function(){
// 1. Példa. ---------------------- add prependTo -----------------------------------------
    $("#btnadd01").click(function(){
        $("#p02").add("<span class='piroshb'>Új span elem és tartalma, meglévő tartalom elé.</span> ").prependTo("#p02");
    });
	
//  2. Példa. ---------------------- add appendTo ------------------------------------------
    $("#btnadd02").click(function(){
        $("#p03").add("<span class='piroshb'>Új span elem és tartalma, meglévő tartalom után.</span>").appendTo("#p03");
    });

//  3. Példa. --------------Kiválasztott p és span elemhez, add a következő stílust.-------------------	
	$("#btnadd03").click(function(){
		$("#p02").add(document.getElementsByTagName("span")[0]).css({"color": "yellow", "font-weight": "bold", "background-color": "blue"});
    });

//  4. Példa. ----------------------div  add appendTo ------------------------------------------
    $("#btnadd04").click(function(){
      var ures=$("#ures");
          ures.add(" <h3 style='background-color:pink;'>Új h3 címsor.</h3>").appendTo("#ures");
          ures.add(" <p style='background-color:orange;'>Új p elem és tartalma.</p>").appendTo("#ures");
          ures.add(" <span class='piroshb'>Új span elem és tartalma.</span>").appendTo("#ures");
    });	
	
});
</script>
</head>
<body>

<p id="p01">

Első bekezdés tartalma. <span>Span elemmel kijelölt tartalom.</span>

</p>

<p id="p02">

Második bekezdés tartalma.

</p>

<p id="p03">

Harmadik bekezdés tartalma.

</p>

<p id="p04">

<span>Span elemmel kijelölt tartalom.</span> Negyedik bekezdés tartalma.

</p>

<div id="ures">
</div>



add() metódus, második teszt bemutató.





<div id="dokument">
<div id="add01">

<p> Első p elem. Első bekezdés. (index 0)</p>

<span> Első span elem. (index 0)</span>

<p> Második p elem. Második bekezdés. (index 1)</p>

<span> Második span elem. (index 1)</span>
<div id="add02">

<p> p elem. (index 2)</p>

<span> span elem. (index 2)</span>

<p> p elem. (index 3)</p>

<span> span elem. (index 3)</span> </div>
</div>

<p> p elem. (index 4) </p>

<pre> pre elem. </pre>

<p id="p05"> p elem. (index 5) </p>

<pre> pre elem. </pre>

<p> p elem. (index 6) </p>

</div>
 
Add a stílust, minden p elemhez.
$("p")
.css({"border": "3px solid red", "background-color": "orange"});


Add a stílust, minden p, és az első span elemhez.
$("p").add(document.getElementsByTagName("span")[0])
.css({"border": "3px solid red", "background-color": "orange"});


Add a stílust, kiválasztott területen lévő,
 minden p elemhez, és a második span elemhez.
$("#add02 > p")
.add(document.getElementsByTagName("span")[1])
.css({"border": "3px solid red", "background-color": "orange"});




Add a kiválasztott elemhez, ezt a span elemet és tartalmát.
$("#p05").add("<span>Egy új span elem.</span>").appendTo("#p05");


Első p elemet tartalmával együtt kiveszi a szövegfolyamból, 
és elhelyezi a második p elemben. 
$("p:eq(0)").add().appendTo("p:eq(1)");


Első p elemet kiveszi a szövegfolyamból, hozzáadja a 
span elemet, és elhelyezi a második p elemben.
$("p:eq(0)").add("<span>Újonnan elhelyezett, span elem.</span>")
.appendTo("p:eq(1)");
add() metódus hibája: Kattintsunk egymás után többször is, a 4. vagy 5. vagy 6. button gombra, és figyeljük mi történik!
Aktiválódását, önmagában, csak, oldal betöltődéséhez alkalmazhatjuk, és semmi más eseményhez.
Eseményhez kötjük, akkor if feltétellel határozzuk meg, aktiválódását.
Kattintsunk egymás után többször is, a 4. button gombra, majd teszteljük a 7.Példa button gombbal is. 
var x=1;
$("#ad07").click(function(){   if(x==1) {
   $("#p05").add("<span>Egy új span elem.</span>").appendTo("#p05");  x++; }
});

8. Példa:

$("#btnadd06").click(function(){
     $("#add02").css({"border": "3px solid green", "background-color": "red"})
       .add("p").css({"color": "black", "background-color": "yellow"});
});

Amit az első css stílusoknál meghatározunk, 
azt a második css stílusai, felülírják.
A div szakasznak feleslegesen határoztunk meg háttérszínt,
a border azért maradt, mert a második css stílusnál,
nincs border meghatározás.