JavaScript 添加图片
导言
在网页开发中，图片是一个重要的元素，能够提升用户体验、增加页面的吸引力，以及有效地传达信息。通过 JavaScript，我们可以动态地添加、修改和删除网页上的图片。本文将介绍如何使用 JavaScript 添加图片到网页中。
添加图片的方法
使用 createElement 方法
要添加一个图片元素到网页上，我们可以使用 createElement 方法创建一个 img 元素，并设置其相关属性。
const img = document.createElement('img');
img.src = 'image.jpg';
img.alt = '这是一张图片';
document.body.appendChild(img);
上面的代码通过 createElement 方法创建了一个 img 元素，并将其赋值给变量 img。然后，我们设置了该图片的 src 属性为 'image.jpg'，alt 属性为 '这是一张图片'。最后，我们使用 appendChild 方法将图片元素添加到 body 元素中，从而将其展示在网页上。
使用 innerHTML 方法
除了使用 createElement 方法，我们还可以使用 innerHTML 方法来添加图片元素。
const imgHtml = '<img src="image.jpg" alt="这是一张图片">';
document.body.innerHTML += imgHtml;
上面的代码创建了一个字符串 imgHtml，其中包含了一个完整的图片元素的 HTML 代码。然后，我们使用 += 运算符将该字符串添加到 body 元素的 innerHTML 中，从而将图片展示在网页上。
使用 appendChild 方法
如果已经有一个图片元素存在，我们可以使用 appendChild 方法将其添加到指定的容器元素中。
const img = document.getElementById('myImage');
const container = document.getElementById('imageContainer');
container.appendChild(img);
上面的代码通过 getElementById 方法获取到 id 为 myImage 的图片元素，并将其赋值给变量 img。然后，我们使用同样的方式获取到 id 为 imageContainer 的容器元素，并将图片元素添加到该容器中。
更新图片
除了添加图片，我们还可以使用 JavaScript 更新图片的相关属性，例如修改图片的来源、替换图片等。
更新图片来源
要更新图片的来源，我们可以通过修改图片元素的 src 属性。
const img = document.getElementById('myImage');
img.src = 'new-image.jpg';
上面的代码将 id 为 myImage 的图片元素的 src 属性更新为 'new-image.jpg'，从而将图片的来源修改为新的图片。
替换图片
要替换一张图片，我们可以使用 replaceChild 方法将已有的图片元素替换为新的图片。
const newImg = document.createElement('img');
newImg.src = 'new-image.jpg';
const oldImg = document.getElementById('myImage');
const container = oldImg.parentNode;
container.replaceChild(newImg, oldImg);
上面的代码通过 createElement 方法创建了一个新的 img 元素，并将其赋值给变量 newImg。然后，我们通过 getElementById 方法获取到已有的图片元素，并将其赋值给变量 oldImg。接下来，我们获取到图片元素的父容器，并使用 replaceChild 方法将新的图片元素替换掉已有的图片元素。
删除图片
如果要删除一张图片，我们可以使用 removeChild 方法将其从父容器中移除。
const img = document.getElementById('myImage');
const container = img.parentNode;
container.removeChild(img);
上面的代码通过 getElementById 方法获取到要删除的图片元素，并将其赋值给变量 img。然后，我们获取到该图片元素的父容器，并使用 removeChild 方法将其从父容器中移除，从而达到删除图片的效果。
结论
通过使用 JavaScript，我们可以方便地添加、更新和删除网页上的图片元素。无论是通过 createElement 方法创建新的图片元素，还是使用 innerHTML 方法添加图片的 HTML 代码，又或者是通过 appendChild 或 replaceChild 方法更新和替换图片元素，我们都可以灵活地操作图片，从而实现更丰富的网页效果。
希望本文对你理解 JavaScript 添加图片的方法有所帮
