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

给定一个 HTML 元素，任务是创建一个 元素并使用 JavaScript 将其附加到文档中。在这些示例中，当有人单击按钮时，会创建 元素。我们可以用任何其他 JavaScript 事件替换 click 事件。

方法一：

• 使用document.createElement() 方法创建一个空的 img 元素。
• 然后设置它的属性，如（src、height、width、alt、title 等）。
• 最后，将其插入到文档中。

示例 1：此示例实现了上述方法。

 
 
  
 
     
        How to create an image element
        dynamically using JavaScript ?
         
 
  
 
      
     
        GeeksforGeeks 
     
      
     
     
      
     
        click here 
     
      
     
     
      
     
        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.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
            document.getElementById('body').appendChild(img);
            down.innerHTML = "Image Element Added."; 
        } 
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 使用new Image()创建一个空图像实例。
• 然后设置它的属性，如（src、height、width、alt、title 等）。
• 最后，将其插入到文档中。

示例 2：此示例实现了上述方法。

 
 
  
 
     
        How to create an image element
        dynamically using JavaScript ?
         
 
  
 
      
     
        GeeksforGeeks 
     
      
     
     
      
     
        click here 
     
      
     
     
      
     
        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.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
            document.getElementById('body').appendChild(img);
            down.innerHTML = "Image Element Added."; 
        } 
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。