كيفية إضافة صورة إلى DOM باستخدام JavaScript

كنت بحاجة إلى إضافة صورة برمجيًا إلى ملفDOMبعبارة أخرى لصفحة HTML ديناميكيًا.

للقيام بذلك ، قمت بإنشاء ملفimgباستخدام عنصرcreateElementطريقة كائن المستند:

const image = document.createElement('img')

ثم أضع ملفsrcسمة الصورة:

image.src  = '/picture.png'

(يمكنك استخدام عنوان URL نسبي أو مطلق ، تمامًا كما تستخدم في HTML عاديimgبطاقة شعار)

ثم حددت الحاوية التي أردت إلحاق الصورة بها ، واتصلت بـappendChild()الطريقة على ذلك:

document.querySelector('.container').appendChild(image)

المزيد من دروس المتصفح: