הוספת אלמנטים בדף בצד הclient

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

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

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

אני השתמשתי בהוספת אלמנט TEXTARA לאחר לחיצה על כפתור:

var moneP = 1;

function addText(idDiv) {

 var newTextarea = document.createElement("textarea");

            newTextarea.rows = 10;

            newTextarea.className = "textHide"; //name of class

            newTextarea.id = "p" + moneP;

            newTextarea.name = "p" + moneP;

            newTextarea.value = " פיסקה" + moneP;

כעת נבחר אחרי איזה אלמנט בDOM הקיים:            

            var my_div = document.getElementById("idDiv");

            

(בשביל לבחור היכן הוא יצוץ שלחתי בהתחלה את הID של האלמנט שבו הוא נמצא בדף, כדי להוסיף אותו אחריו)

ואז נצרף אותו לדף:

            my_div.appendChild(newTextarea);

אפשרות נוספות להוסיף, אם נרצה את האלמנט אחרי הDIV

            my_div.insertBefore(newTextarea, my_div.firstChild)

 }

כמובן בדף נוסיף אלמנט שמבצע שליחה, ששולח בתוכו גם את ID שלו:

<img src=".." id="img" onclick="addText("img")"/>