极客教程HTML 使用JavaScript向HTML文档中添加图片
在本文中，我们将介绍如何使用JavaScript向HTML文档中添加图片。HTML是一种用于创建网页的标记语言，我们可以使用它来构建网页的结构和内容。通过JavaScript，我们可以在网页上动态地添加、修改和删除元素，包括图片。下面我们将详细介绍如何使用JavaScript向HTML文档添加图片，并给出示例说明。
阅读更多：HTML 教程
1. 通过createElement方法创建图片元素
要向HTML文档中添加图片，我们首先需要创建一个图片元素。可以使用JavaScript的createElement方法来创建元素。下面是一个示例代码，展示如何使用createElement方法创建一个img元素：
var img = document.createElement("img");
在上述代码中，首先使用document.createElement(“img”)来创建一个img元素，并将其赋值给变量img。
2. 设置图片的属性
创建了图片元素后，我们需要设置图片的属性，包括src、alt、width和height等。下面是一个示例代码，展示如何设置图片的属性：
img.src = "image.jpg";
img.alt = "示例图片";
img.width = 400;
img.height = 300;
在上述代码中，我们将图片的src属性设置为”image.jpg”，表示图片的来源是名为image.jpg的文件。alt属性用于描述图片的内容，当图片无法加载时， alt属性的内容将作为替代文本显示给用户。width和height属性用于设置图片的宽度和高度。
3. 将图片元素添加到HTML文档中
在设置了图片的属性后，我们需要将图片元素添加到HTML文档中。可以使用appendChild方法将图片元素添加到指定的HTML元素中。下面是一个示例代码，展示如何将图片元素添加到HTML文档中：
var container = document.getElementById("container");
container.appendChild(img);
在上述代码中，我们首先使用document.getElementById方法获取id为”container”的HTML元素，并将其赋值给变量container。然后使用container.appendChild方法将图片元素添加到container元素中。
4. 完整示例代码
下面是一个完整的示例代码，展示如何使用JavaScript向HTML文档中添加图片：
<!DOCTYPE html>
<html>
<head>
<title>添加图片示例</title>
<script>
window.onload = function() {
var img = document.createElement("img");
img.src = "image.jpg";
img.alt = "示例图片";
img.width = 400;
img.height = 300;
var container = document.getElementById("container");
container.appendChild(img);
};
</script>
</head>
<body>
<div id="container">
<!-- 这里可以添加其他内容 -->
</div>
</body>
</html>
在上述示例代码中，我们将JavaScript代码放在了window.onload事件处理函数中，以确保在网页加载完成后执行。在div元素中，我们可以添加其他内容，图片将会显示在该div元素中。
总结
通过本文的介绍，我们学习了如何使用JavaScript向HTML文档添加图片。首先，我们使用createElement方法创建一个图片元素，然后设置图片的属性，最后将图片元素添加到HTML文档中。使用JavaScript动态地向HTML文档中添加图片，可以使网页更具交互性和吸引力。希望本文对你了解如何添加图片到HTML文档有所帮助。