动态添加图片

js

function newNode(){
    
    var image=document.createElement("img");       //创建一个图片节点
    image.setAttribute("src","images/newimg.jpg");  //设置图片路径

    document.body.appendChild(image);      //插入图片到sixty1前面
}


    
function  addAnswer(){
        var liElement=document.createElement("li");
     var  inputElement=document.createElement("input");
     inputElement.setAttribute("type","text");
     inputElement.setAttribute("name","answer");
     liElement.appendChild(inputElement);
     var questionsRoot=document.getElementById("questions");
     questionsRoot.appendChild(liElement);
}

View Code

 1 <style type="text/css">
 2 ol li{ list-style-type:upper-alpha}
 3 </style>
 4 <script src="js/addImg.js"></script>
 5 </head>
 6 
 7 <body>
 8     <h2>喜欢的水果</h2>
 9     <input id="b1" type="button" value="增加一幅图片" onclick="newNode()" />
10     <input id="b1" type="button" value="增加一个选项" onclick="addAnswer()" />
11     <img src="images/sixty1.jpg" id="sixty1" alt="水果" />
12     <img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
13     
14    <ol id="questions">
15       <li><input type="text" name="answer"/></li>
16    </ol>
17 </body>

相关阅读:
20191114PHP验证码
20191114PHP图像绘制
20191114PHP文件操作
20191108添加数组元素操作
20191108数组组合练习案例
20191108PHP数组查找练习
20191107数组排序练习
20191107PHP创建数组练习
20191107万年历
20191101php日期练习

原文地址：https://www.cnblogs.com/914556495wxkj/p/3426585.html