Főoldalra

jQuery Új tartalom beillesztése


append( )   Meglévő tartalom végéhez, beszúrás a meglévő tartalom után. Betűméret megegyezik a meglévő tartalom stílusával.

prepend( )  Meglévő tartalom elejéhez, beszúrás a meglevő tartalom elé. Betűméret megegyezik a meglévő tartalom stílusával.

after( )        Új sorként, meglévő tartalom alá. Betűk stílusát érdemes meghatároznunk, vagy rábízzuk a böngésző programra.

before( )     Új sorként, meglévő tartalom fölé. Betűk stílusát érdemes meghatároznunk, vagy rábízzuk a böngésző programra.

Megjegyzés:
document.write(..); Alkalmazható a jQuery módszereknél is

Első teszt pédák.


Meghatározás.


Új tartalom megjelenése.

<p id="p01">Első bekezdés szövege.</p>
 Nem rendelünk hozzá, új tartalmat.

Első bekezdés szövege.

<p id="p02">Második bekezdés szövege.</p>

<script type="text/javascript">
var tartalom= " Ez egy új append() tartalom! ";
$("#p02").append(tartalom);
</script>

Második bekezdés szövege.

<p id="p03"> Harmadik bekezdés szövege.</p>

<script type="text/javascript">
var tartalom= " Ez egy új prepend() tartalom! ";
$("#p03").prepend(tartalom);
</script>

Harmadik bekezdés szövege.

<p id="p04">Negyedik bekezdés szövege.</p>

<script type="text/javascript">
var tartalom= " Ez egy új after() tartalom! ";
$("#p04").after(tartalom);
</script>

Negyedik bekezdés szövege.

<p id="p05">Ötödik bekezdés szövege.</p>

<script type="text/javascript">
var tartalom= "<p> Ez egy új before() tartalom!</p> ";
$("#p05").before(tartalom);
</script>

Ötödik bekezdés szövege.

<p>Hatodik bekezdés, azonosítója nincs.</p>

Hatodik bekezdés, azonosítója nincs.

Kiválasztott elem, (Például a "p" elem) 
mennyiszer található meg, a script előtt.

<script type="text/javascript">
var p_elemek = $("p").length;
document.write("A Sript előtti p elemek száma = "+ p_elemek)
</script>

<p>Hetedik bekezdés szövege.</p>
Ez, Sript utáni p elem, melyet nem vesz figyelembe a program.

Hetedik bekezdés szövege.


A jQuery meghatározások.

<head>
     <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
</head>
<body>
<script type="text/javascript">

// Kiválasztott elem mennyiszer található meg, a script előtt.
var p_elemek = $("p").length;
document.write("A Script előtti p elemek száma = "+ p_elemek +"<br />")
// ----------------------------------------------------------------

// append () Meglévő tartalom végéhez, beszúrás a meglévő tartalom után (folytatása).
var tartalom= " Ez egy új append() tartalom! ";
$("#egyedi02").append(tartalom);
// ----------------------------------------------------------------

// prepend() Meglévő tartalom elejéhez, beszúrás a meglevő tartalom elé.
var tartalom= " Ez egy új prepend() tartalom! ";
$("#egyedi03").prepend(tartalom);
// ----------------------------------------------------------------

// after() Új sorként, meglévő tartalom után, a kiválasztott elemet vagy elemek sorát követően.
var tartalom= " Ez egy új after() tartalom! ";
$("#egyedi04").after(tartalom);
// ----------------------------------------------------------------

// before()  Új sorként, meglévő tartalom elé, a kiválasztott elemet vagy elemek sorát megelőzően.
var tartalom= " Ez egy új before() tartalom! ";
$("#egyedi05").before(tartalom);
// ----------------------------------------------------------------

</script>




A fenti Script példáról:
- Helyes működéshez, dokumentum végén kell elhelyezni, hogy mindem elemet, be tudjon azonosítani.
- A document.write(" ") meghatározást pedig ott kell elhelyezni, ahol a kiíratást meg akarjuk jelenníteni. ( head szakaszban nem lehet.)
- A Scripben meghatározottak azonnal végrehajtódnak, oldal betöltődése után.

-----------------------------------------------------------------------------------------------------------------------------------

A következő példa eltér az előzőtől, de ugyanazt a műveletet végzi el, melyet a fenti példában láthattunk.
- Első meghatározás a ready funkció. Ez közli a böngészővel, ha az oldal betöltődése megtörtént, kész van, akkor, olvasd be a Scriptet.
        <script>
          $(document).ready( function( ) {            // Ezzel a ready funkció meghatározással kezdődik a Script.
		  
          } );                    // Ezek a ready funkció záróelemei, melyek a Sript végén helyezkednek el.
        </script>

A ready funkció alkalmazása esetén, Scriptet ott helyezzük el a dokumentumban, ahol csak akarjuk.
Szabály az, hogy a head szakaszban legyen.

Az  orange  háttérszínnel kiemelt meghatározásokat és záró elemeiket, nem kötelező beírni.
-	Nem írjuk be ezeket a meghatározásokat, a Scriptben meghatározottak, oldal betöltődését követően, azonnal végrehajtódnak.

Beírjuk ezeket a meghatározásokat, akkor meghatározhatjuk, hogy milyen esemény bekövetkezésekor hajtódjanak végre
      Következő példában, click, azaz kattintási eseménynél aktiválódnak.
      A click események, button gombokhoz vannak rendelve,  id azonosítóval. (button01, button02, stb.)
	  
             A click eseményt tetszőleges elemhez is rendelhetjük, ekkor nem a button gombokhoz írjuk be az id azonosítót, 
             hanem ahhoz, melyet kiválasztunk.
             Eseményt, id azonosítóval hozzárendelhetjük azon p elemhez is, melyhez új tartalmat adunk, ekkor a p elemre kell kattintani.

Következő teszt példa.

<head>
     <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){

 // -------------- append. ---------------------------------------------------------------------
	$("#button01").click(function(){
		var tartalom= " Ez egy új append() tartalom! ";
		$("#p02").append(tartalom);
	});
 // -------------- prepend. ---------------------------------------------------------------------
	$("#button02").click(function(){
		var tartalom= " Ez egy új prepend() tartalom! ";
		$("#p03").prepend(tartalom);
	});
 // -------------- after. --------------------------------------------------------------------------
	$("#button03").click(function(){
		var tartalom= " Ez egy új after() tartalom! ";
		$("#p04").after(tartalom);
	});
 // -------------- before. -----------------------------------------------------------------------
	$("#button04").click(function(){
		var tartalom= "Ez egy új before() tartalom! ";
		$("#p05").before(tartalom);
	});
 // --------- Elemek száma.  -------------------------------------------------------------
	$("#button05").click(function(){
		var p_elemek = $("p").length;
		$("#pelemek").append(p_elemek);
	});

 // ---  Oldal frissítése. --------------------------------------------------------------------
		$(".of5").click(function(){ 
				window.location.reload();
		});
		
});
</script>
</head>

<body>

<p id="p01">Első bekezdés szövege.</p>
 Nem rendelünk hozzá, új tartalmat.


<button id="button01"> Új append tartalom.<br />Kattints ide!</button>
<p id="p02">Második bekezdés szövege.</p>


<button id="button02"> Új prepend tartalom.<br />Kattints ide!</button>
<p id="p03"> Harmadik bekezdés szövege.</p>



<button id="button03"> Új after tartalom.<br />Kattints ide!</button>
<p id="p04">Negyedik bekezdés szövege.</p>



<button id="button04"> Új before tartalom.<br />Kattints ide!</button>
<p id="p05">Ötödik bekezdés szövege.</p>




<p>Hatodik bekezdés, nem kap új tartalmat.</p>



<button id="button05"> Összes p elem, száma.<br />Kattints ide!</button>
<span id="pelemek"> P elemek száma: </span>



<button class="of5"> Minden új teszt előtt.<br />Kattints ide!</button>

</body>

Első bekezdés szövege.

Második bekezdés szövege.

Harmadik bekezdés szövege.

Negyedik bekezdés szövege.




Ötödik bekezdés szövege.

Hatodik bekezdés, nem kap új tartalmat.




Dokumntumban található p elemek száma: