JavaScript 如何动态创建图像元素

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

方法1

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

示例： 这个示例实现了上述方法。

<!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;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Click on the button to add image element
    </h3>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h2 id="result" style="color:green;"></h2>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            let img = document.createElement('img');
            img.src =
'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
            document.getElementById('body').appendChild(img);
            res.innerHTML = "Image Element Added.";
        }
    </script>
</body>
 
</html>

输出：

JavaScript 如何动态创建图像元素

方法2

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

示例： 这个示例实现了上述方法。

<!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;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Click on the button to add image element
    </h3>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h2 id="result" style="color:green;"></h2>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            let img = new Image();
            img.src =
'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
            document.getElementById('body').appendChild(img);
            res.innerHTML = "Image Element Added.";
        }
    </script>
</body>
 
</html>

输出:

JavaScript 如何动态创建图像元素