append()

.append( content )

מחזירה: jQuery

תיאור: מכניס תוכן, שמוגדר על ידי פרמטר, לסוף של כל אלמנט בהתאמה.

.append( content )

הוספה בגרסה: 1.0

content

מחרוזת, אלמנט, אובייקט

אלמנט, מחרוזת HTML, או אובייקט jQuery כדי להכניס לסוף של כל אלמנט ברשימה של אלמנטים בהתאמה.

.append( function(index, html) )

הוספה בגרסה: 1.4

function(index, html)

פונקציה

פונקציה שמחזירה מחרוזת HTML כדי להכניס בסוף של כל אלמנט ברשימה של אלמנטים בהתאמה. מקבל אינדקס של מיקום האלמנט ברשימה, וערך HTML ישן של האלמנט בתור ארגומנטים.

שיטה .append() מכניסה תוכן מסוים, כמו ילד אחרון של כל אלמנט בסט jQuery (כדי להכניס תוכן כמו ילד ראשון, תשתמשו ב- .prepend()).

שיטות .append() ו- .appendTo() מבצעות אותן משימות. ההבדל העיקרי הוא התחביר, מיקום התוכן והיעד. עם .append(), ביטוי בחירה שקודם לשיטה הוא המיכל שבתוכו יוכנס התוכן. עם .appendTo(), מצד שני, תוכן הקודם לשיטה, כמו גם סלקטור של הביטוי, או סימון מיוצר בלטוס, ומוכנס לתוך המיכל היעד.

נבחן HTML הבא:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>

</div>

אנחנו יכולים ליצור תוכן ולהכניס אותו למספר אלמנטים בו זמנית:

$('.inner').append('<p>Test</p>');

כל אלמנט פנימי של <div> יקבל תוכן חדש:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">

    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>

  </div>
</div>

אנחנו גם יכולים לבחור אלמנט בדף ולהכניס אותו לאלמנט אחר:

$('.container').append($('h2'));

אם אלמנט הנבחר בצורה הזו להכניס למקומות אחרים, הוא יעבור לתוך האלמנט היעד (לא משוכפל):

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

אם קיים יותר מאלמנט היעד אחד, לעומת זאת, ישוכפלו עותקים עבור כל היעד אחרי הראשון.

דוגמאות

דוגמה 1

מוסיף קוד HTML לכל הפסקאות.

$("p").append("Hello");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("p").append("Hello");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מוסיף אלמנט לכל הפסקאות.

$("p").append(document.createTextNode("Hello"));

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("p").append(document.createTextNode("Hello"));
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

מוסיף אובייקט jQuery ( בדומה למערך של אלמנטים DOM) לכל הפסקאות

$("p").append( $("strong") );

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 3 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("p").append( $("strong") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <strong>Hello world!!!</strong><p>I would like to say: </p>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

append()

.append( content )

.append( content )

.append( function(index, html) )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

דוגמה 3

דוגמה 3 - קוד מלא:

תגובות