在前端开发中，有时必须通过 JavaScript 动态创建 HTML 元素。其中，创建 img 元素是一个常见的任务，因为它可以用于显示网页中的图像、照片和图标等。
本文将介绍最佳实践，即使用 JavaScript 创建 img 元素的最好方式。我们还将讨论如何设置 img 元素的属性和添加到 DOM 中，并提供示例代码以帮助您更好地理解。
最好的JavaScript代码创建img元素
要创建 img 元素，可以使用 JavaScript 的 createElement 方法。代码如下：
const img = document.createElement('img');此代码将创建一个名为 img 的变量，它将包含一个 img 元素对象。接下来，您可以将其添加到 DOM 中，就像将任何其他元素添加到 DOM 中一样。
在创建 img 元素后，可能需要设置其属性，例如 src、alt 和 title 等。这可以通过 JavaScript 中的 setAttribute 方法来完成。代码如下：
img.setAttribute('src', 'url/of/image.png');
img.setAttribute('alt', 'alternative text');
img.setAttribute('title', 'image title');以上代码将分别设置 img 元素的 src、alt 和 title 属性。请注意，如果您没有设置 alt 属性，屏幕阅读器将无法检测到该图像。因此，请始终为每个 img 元素设置 alt 属性。
如何添加到DOM中
要将 img 元素添加到 DOM 中，可以使用 appendChild 方法。代码如下：
const parentElement = document.getElementById('parent-element');
parentElement.appendChild(img);此代码将查找具有 parent-element ID 的元素，并将 img 元素添加为其子元素。请注意，您应该更改 parent-element 为实际父元素 ID。
示例代码
以下是一个完整的示例代码，创建 img 元素并将其添加到 DOM 中：
-- -------------------- ---- -------
--------- -----
------
------
--------------- -- --- ------- ----- ------------------
-------
------
---- ---------------------------
--------
----- -------- - ----------------------------------
----- --- - ------------------------------
----------------------- ----------
----------------------- ------------ --------
------------------------- ------ --------
----- -------------- - -------------------------------------------
--------------------------------
---------
-------
-------在上面的示例中，我们创建了一个包含 img 元素的 div 元素，并将其添加到页面中。我们还设置了 img 元素的 src、alt 和 title 属性，并将其添加到 div 元素中。
结论
使用 JavaScript 创建 img 元素很简单且非常有用。通过本文所述的最佳实践，您可以轻松地创建和添加 img 元素，并为其设置属性。请确保为每个 img 元素设置 alt 属性，以便使您的网站可访问性更高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11479