动态添加图片
js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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); }
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>