如何使用JavaScript动态创建图像元素?

2021年3月19日17:00:00 发表评论 900 次浏览

给定一个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 >

输出如下:

在单击按钮之前:

如何使用JavaScript动态创建图像元素?1

单击按钮后:

如何使用JavaScript动态创建图像元素?2

方法二:

  • 使用创建一个空的图像实例新图片().
  • 然后设置其属性, 例如(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 >

输出如下:

在单击按钮之前:

如何使用JavaScript动态创建图像元素?3

单击按钮后:

如何使用JavaScript动态创建图像元素?4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: