给定一个HTML元素, 任务是创建一个<img>元素, 并使用JavaScript将其附加到文档中。在这些示例中, 当有人单击按钮时, 就会创建<img>元素。我们可以将click事件替换为任何其他JavaScript事件。
方法1：
- 使用创建一个空的img元素document.createElement()方法.
- 然后设置其属性, 例如(src, 高度, 宽度, alt, 标题等)。
- 最后, 将其插入文档中。
范例1：本示例实现了上述方法。
<!DOCTYPE HTML>
< html >
< head >
< title >
How to create an image element
dynamically using JavaScript ?
</ title >
</ head >
< body id = "body" style = "text-align:center;" >
< h1 style = "color:green;" >
lsbin
</ h1 >
< p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;" >
</ p >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
up.innerHTML = "Click on the button to add image element";
var down = document.getElementById('GFG_DOWN');
function GFG_Fun() {
var img = document.createElement('img');
img.src =
'https://media.lsbin.org/wp-content/uploads/20190529122828/bs21.png';
document.getElementById('body').appendChild(img);
down.innerHTML = "Image Element Added.";
}
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
单击按钮后：
方法二：
- 使用创建一个空的图像实例新图片().
- 然后设置其属性, 例如(src, 高度, 宽度, alt, 标题等)。
- 最后, 将其插入文档。
范例2：本示例实现了上述方法。
<!DOCTYPE HTML>
< html >
< head >
< title >
How to create an image element
dynamically using JavaScript ?
</ title >
</ head >
< body id = "body" style = "text-align:center;" >
< h1 style = "color:green;" >
lsbin
</ h1 >
< p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;" >
</ p >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
up.innerHTML = "Click on the button to add image element";
var down = document.getElementById('GFG_DOWN');
function GFG_Fun() {
var img = new Image();
img.src =
'https://media.lsbin.org/wp-content/uploads/20190529122828/bs21.png';
document.getElementById('body').appendChild(img);
down.innerHTML = "Image Element Added.";
}
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
单击按钮后：
