原生js动态创建img
时间: 2023-10-23 07:35:34 浏览: 51
使用原生 JavaScript 动态创建 `img` 标签可以通过以下步骤实现:
1. 创建 `img` 标签:使用 `document.createElement()` 方法创建一个 `img` 元素。
```javascript
var img = document.createElement('img');
```
2. 设置 `src` 属性:使用 `setAttribute()` 方法设置 `img` 元素的 `src` 属性,指定要加载的图片的 URL。
```javascript
img.setAttribute('src', 'https://example.com/image.jpg');
```
3. 添加到文档中:使用 `appendChild()` 方法将 `img` 元素添加到文档中的某个元素中,例如 `body`、`div` 等。
```javascript
document.body.appendChild(img);
```
完整示例:
```javascript
var img = document.createElement('img');
img.setAttribute('src', 'https://example.com/image.jpg');
document.body.appendChild(img);
```
需要注意的是,在加载图片时可能会遇到跨域问题,需要在服务器端设置 CORS 或者使用代理等方式解决。
相关问题
原生js给动态创建的元素绑定事件
可以使用addEventListener()方法来给动态创建的元素绑定事件。
例如,如果你想给一个动态创建的按钮元素添加一个点击事件,可以使用以下代码:
```javascript
// 创建按钮元素
var btn = document.createElement("button");
btn.innerHTML = "Click me";
// 给按钮元素添加点击事件
btn.addEventListener("click", function() {
alert("Button clicked");
});
// 将按钮元素添加到页面中
document.body.appendChild(btn);
```
在上面的代码中,我们先创建了一个按钮元素,并设置了它的文本内容。然后,我们使用addEventListener()方法来给按钮元素添加一个点击事件处理函数。最后,我们将按钮元素添加到页面中。
这样,当用户点击按钮时,就会触发点击事件处理函数,弹出一个警告框。
原生js动态添加元素
在原生 JavaScript 中,可以使用以下方法动态添加元素:
1. 创建新元素:使用`document.createElement()`方法来创建一个新的 HTML 元素。例如,要创建一个新的 `div` 元素,可以使用以下代码:
```javascript
let newDiv = document.createElement("div");
```
2. 设置元素属性:使用`element.setAttribute()`方法来设置元素的属性。例如,要设置 `div` 元素的 id 属性为 "myDiv",可以使用以下代码:
```javascript
newDiv.setAttribute("id", "myDiv");
```
3. 添加文本内容:可以使用`element.textContent`或`element.innerHTML`属性来添加文本内容。例如,要在 `div` 元素中添加文本 "Hello, World!",可以使用以下代码:
```javascript
newDiv.textContent = "Hello, World!";
```
或者,如果要添加包含 HTML 标签的内容,可以使用以下代码:
```javascript
newDiv.innerHTML = "<strong>Hello, World!</strong>";
```
4. 添加到页面中:最后,使用`element.appendChild()`方法将新创建的元素添加到页面中的指定位置。例如,要将 `div` 元素添加到页面的 `body` 元素中,可以使用以下代码:
```javascript
document.body.appendChild(newDiv);
```
这样就可以动态创建并添加元素到页面了。记得将上述代码放在适当的位置执行,以便在需要的时候进行元素的添加。