נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

כיצד להוסיף ולערוך אלמנטים בדף באמצעות JavaScript?

מחבר:
בתאריך:

הוספה של אלמנט

נדגים הוספת אלמנט ב-JavaScript על ידי הוספת אלמנט li לרשימה (ul).
איך עושים זאת?

  1. יוצרים אלמנט מסוג li באמצעות:
    var listItem = document.createElement("li");
  2. מדביקים לאלמנט זה את הטקסט:
    var textNode = document.createTextNode("This is a new list item.");
    listItem.appendChild(textNode);
  3. בוחרים ברשימה מסוימת על פי ה-id שלה, ולתוכה מוסיפים את האלמנט.
    var mainList = document.getElementById("mainList");
    mainList.appendChild(listItem);

ועכשיו הכול ביחד:

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<ul id="mainList">
    <li>Inside the main list.</li>
</ul>

<ul><li>Control outside the main list</li></ul>

<script>
var listItem = document.createElement("li");

var textNode = document.createTextNode("This is a new list item.");  

listItem.appendChild(textNode);

var mainList = document.getElementById("mainList");

mainList.appendChild(listItem);
</script>

</body>
</html>

 

כפי שניתן להוסיף אלמנט יחיד, ניתן להוסיף מספר אלמנטים באופן סדרתי. בדוגמה הבאה, אני משתמש במערך ובלולאת for כדי להוסיף פריטי li לרשימה (ul).

<ul id="mainList">
<li>Inside the main list.</li>
</ul>

<ul><li>Control outside the main list</li></ul>

<script>
var listItems = [
"1 chicken",
"2 chickens",
"3 chickens"
];

var mainList = document.getElementById("mainList");

var numberOfArrayItems = listItems.length;

for(var i = 0; i < numberOfArrayItems; i++) {

  var listItem = document.createElement("li");

  var textNode = document.createTextNode(listItems[i]); 
 
  listItem.appendChild(textNode);

  mainList.appendChild(listItem);
}
</script>

 

עדכון אלמנט קיים

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

<ul id="mainList">
<li>Inside the main list.</li>
<li>1 chicken</li>
<li>2 chickens</li>
<li>3 chickens</li>
</ul>

<ul><li>Control outside the main list</li></ul>

<script>
var mainList = document.getElementById("mainList");

var listItem = mainList.getElementsByTagName("li")[0];

listItem.textContent = "No chicken";
</script>

כפי שניתן לשנות אלמנט בודד, ניתן לשנות מספר אלמנטים באופן סדרתי.
הקוד הבא מדגים החלפה של המילה chicken במילה rabbit ברשימה.

<ul id="mainList">
<li>No chicken</li>
<li>1 chicken</li>
<li>2 chicken</li>
<li>3 chicken</li>
</ul>

<ul><li>Control outside the main list<li></ul>

<script>
var mainList = document.getElementById("mainList");

var numberOfItems = mainList.getElementsByTagName("li").length;

for(var i=0; i < numberOfItems; i++){
  var listItem = mainList.getElementsByTagName("li")[i];
	
  // Get the item's text
  var text = listItem.textContent;

  // Replace the word chicken with rabbit
  var newText = text.replace("chicken", "rabbit");
	
  // Update the list item
  listItem.textContent = newText;
}
</script>

 

הסרה של אלמנטים

ניתן גם להסיר אלמנטים.
בדוגמה הבאה נסיר את האלמנט הראשון ברשימה באמצעות removeChild:

<ul id="mainList">
<li>No rabbit</li>
<li>1 rabbit</li>
<li>2 rabbits</li>
<li>3 rabbits</li>
</ul>

<ul><li>Control outside the main list</li></ul>

<script>
var mainList = document.getElementById("mainList");

var listItem = mainList.getElementsByTagName("li")[0];


if(listItem) {
  mainList.removeChild(listItem);
}
</script>

שימו לב, חובה לבדוק אם הפריט קיים. במידה ואינו קיים, יוחזר undefined.

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

<ul id="mainList">
<li>No rabbit</li>
<li>1 rabbit</li>
<li>2 rabbits<li>
<li>3 rabbits</li>
</ul>

<ul><li>Control outside the main list</li></ul>

<script>
var mainList = document.getElementById("mainList");

while(mainList.hasChildNodes()){
    mainList.removeChild(mainList.lastChild);
}
</script>

 

למדריך שמסביר כיצד להוסיף אלמנטים לדף בצורה קצת יותר מעמיקה

לכל מדריכי ה-javascript

 

הוסף תגובה חדשה

 

= 3 + 9