תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

כיצד להוסיף ולערוך אלמנטים בדף באמצעות 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

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

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך אומרים בעברית אינטרנט?

 

תמונת המגיב

סקיבידי טואלט בתאריך: 03.03.2024

זה איך שאני הולך לצאת מהמטריקס אני יקים אתר דרופשיפינג ויהיה מיליארדר