描述：

改变图片，添加元素。。。其中涉及到的方法如：document.getElementById("ID名称")，onload()：在页面加载完成的时候显示，在获取到指定的元素之后，还可以更改元素的样式，元素的属性等等。

对于创建元素，为document.createElement("h1")，创建元素，document.createTextNode("您好，世界~");为书写内容，  h1.appendChild(text);为将内容添加到元素中， element.appendChild(h1);为将创建的元素添加到指定元素的子元素中。。。

温馨提示：对于代码中的图片，注意图片的路径，可为相对路径，也可以为绝对路径，可根据自己的习惯，进行相应的更改，然后从而达到我们想要的效果。

效果展示：

2022年7月20日——JavaScript案例（2）_绝对路径

代码演示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3-1</title>
    </head>
    <body onload="alert('你好，欢迎来到我的世界')">
        <p>
            说明：onload函数，会在，当前的界面加载完毕之后，然后调用onload函数
        </p>
        <h1>HTML模板</h1>
        <br/><button onclick="test()">点击我更换下图中的图片</button>
        <img id="imgs" src="../../img/001.png" height="500px"/>
        <p id="p1">
            <button onclick="test1()">点击，创建H1标题，并且填写内容为：您好，世界~</button>
        </p>
        <p>
            <script>
                function test(){
                    document.getElementById("imgs").src="../../img/002.png";
                }
                document.write(new Date());
                function test1(){
                    var h1=document.createElement("h1");
                    var text=document.createTextNode("您好，世界~");
                    h1.appendChild(text);
                    var element=document.getElementById("p1");
                    element.appendChild(h1);

                }
            </script>
        </p>
    </body>
</html>

文章中如果存在问题，请您及时指正，在评论区留言。。。

我将及时更正，谢谢。