js往html添加 img
时间: 2023-09-06 14:12:09 浏览: 47
在JavaScript中,可以通过DOM操作来向HTML页面中添加`<img>`元素。具体步骤如下:
1. 首先获取到要添加图片的HTML元素,可以通过`document.getElementById()`或`document.querySelector()`方法获取到对应的元素节点。
2. 创建一个`<img>`元素,可以通过`document.createElement()`方法创建一个空的`<img>`元素。
3. 设置`<img>`元素的`src`属性,指定要添加的图片的URL地址。
4. 可选:设置`<img>`元素的其他属性,例如`alt`、`title`、`width`、`height`等。
5. 将`<img>`元素添加到HTML元素中,可以通过`appendChild()`方法将`<img>`元素添加到目标HTML元素的子节点列表中。
下面是一个示例代码:
```javascript
// 获取要添加图片的HTML元素
let targetElement = document.getElementById("my-div");
// 创建一个<img>元素
let imgElement = document.createElement("img");
// 设置<img>元素的src属性
imgElement.src = "https://example.com/my-image.png";
// 设置<img>元素的其他属性
imgElement.alt = "My image";
imgElement.title = "My image";
imgElement.width = 200;
imgElement.height = 200;
// 将<img>元素添加到HTML元素中
targetElement.appendChild(imgElement);
```
在上面的代码中,我们首先获取了一个ID为`my-div`的HTML元素,然后创建了一个`<img>`元素,并设置了它的`src`、`alt`、`title`、`width`和`height`属性。最后,将`<img>`元素添加到了`my-div`元素中。