在 HTML 中，图像元素用于在网页上显示图像。根据需求取多个属性，如‘src’、‘alttext’、‘height’、‘width’等。
在某些情况下，我们需要动态添加图片到网页中。例如，我们在数据库中存储了未知数量的电影数据。我们需要获取电影数据，并且需要显示电影图像以及每部电影的详细信息。在这种情况下，我们需要使用 JavaScript 将图像和数据附加到 DOM。
下面，我们将学习使用JavaScript向网页添加图像元素。
使用 Document.createElement() 方法
document.createElement() 方法使用 JavaScript 创建任何 HTML 元素。它将标签名称作为参数并返回 HTML 元素。
立即学习“Java免费学习笔记（深入）”；
在JavaScript中创建HTML元素后，我们可以修改其各种属性并将其附加到DOM以在网页上显示图像。
语法
用户可以按照下面的语法使用 document.createElement() 方法动态创建图像元素。
let dynamicImage = document.createElement('img');dynamicImage.src = URL;
在上面的语法中，我们使用 createElement() 方法创建了图像元素，并更新了图像元素的“src”属性。
示例
在下面的示例中，我们首先创建了图像元素。之后，我们用我们想要在网页上显示的图像 URL 更新了它的“src”属性。
接下来，我们使用 id 从 DOM 访问预定义的 div 元素，并使用appendChild() 方法将新创建的图像附加为 div 元素的子元素。
在输出中，用户可以观察到图像是使用 JavaScript 添加的。
Using the document.createElement() method to Create image element dynamically using JavaScript
let img = document.getElementById('img'); // Create image element let dynamicImage = document.createElement('img'); // Initialize the image source dynamicImage.src = "https://www.tutorialspoint.com/static/images/logo.png"; // Add image to DOM img.appendChild(dynamicImage);
示例
在下面的示例中，我们创建了按钮。每当用户单击该按钮时，它就会执行 createImage() 函数。
在createImage()函数中，我们使用createElement()方法创建一个新的图像元素并更新其“src”属性值。此外，我们使用 setAttribute() 方法来设置图像的 id、高度和宽度。
图像转图像AI
利用AI轻松变形、风格化和重绘任何图像
65 查看详情
在输出中，用户可以单击按钮查看 200 x 200 尺寸的图像。但是，用户可以更改代码中的尺寸并运行代码来观察输出。
Using the document.createElement() method to Create image element dynamically using JavaScript
function createImage() { let img = document.getElementById('img'); let newImage = document.createElement('img'); newImage.src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png"; // Set attribute values for the image newImage.setAttribute('id', 'myImage'); newImage.setAttribute('width', '200px'); newImage.setAttribute('height', '200px'); img.appendChild(newImage); }
使用 Image() 构造函数
image() 是一个构造函数，用于在 JavaScript 中创建图像元素的实例。我们使用带有“new”关键字的构造函数在 JavaScript 中创建图像的实例并将其附加到 DOM 对象。
语法
用户可以按照以下语法使用 Image() 构造函数通过 JavaScript 创建图像。
Let img = new Image();img.src = URL;
在上面的语法中，我们使用 image() 构造函数创建了图像元素的实例，并更新了其 src 属性的值。
示例
在下面的示例中，当用户单击按钮时，它会执行 createImage() 函数以动态附加到 DOM。
在 createImage() 函数中，我们使用 Image() 构造函数初始化图像实例，然后更新其 src 属性的值。此外，我们通过更新属性值来设置图像的宽度和高度，并将其附加为 div 元素的子元素。
Using the Image() constructor to Create image element dynamically using JavaScript
function createImage() { let img = document.getElementById('img'); let devImage = new Image(); devImage.src = "https://www.tutorialspoint.com/static/images/development.svg"; devImage.setAttribute('width', '300px'); devImage.setAttribute('height', '300px'); img.appendChild(devImage); }
示例
在下面的示例中，我们使用 JavaScript 将多个图像附加到网页。
在 addMultiple() 函数中，我们有一个图像 url 数组。我们遍历数组，并在每次迭代中创建一个新的图像元素，使用给定的源 URL 更新 src 属性，并将其附加到 DOM。
在输出中，用户可以单击按钮在网页上看到五个动态图像。此外，每次用户单击该按钮时，都会更改图像。
Using the Image() constructor to Create image element dynamically using JavaScript
function AddMultiple() { let img = document.getElementById('img'); let imageURLS = [ "https://picsum.photos/200/300", "https://picsum.photos/200/300/?blur", "https://picsum.photos/200/300.webp", "https://picsum.photos/200", "https://picsum.photos/200/300" ] // Fetch random images and append to the DOM for (let i = 0; i < 5; i++) { let randomImage = new Image(); randomImage.src = imageURLS[i]; randomImage.alt = "Random Image"; randomImage.width = 100; randomImage.height = 100; // Add right and left margin to the image randomImage.style.marginRight = "10px"; randomImage.style.marginLeft = "10px"; img.appendChild(randomImage); } }
我们学习了两种将图像动态附加到 Dom 元素的方法。 createElement() 方法创建任何 HTML 元素的实例，包括图像元素。 image() 构造函数仅用于创建图像元素的实例，而不用于创建其他 HTML 元素。
另外，如上个例子，我们在实时开发中可能会得到一个图片URL数组，需要在网页中追加多张动态图片。
以上就是如何使用JavaScript动态创建图像元素？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/538944.html
微信扫一扫 
支付宝扫一扫 
