标签:append -o htm 元素 ddc dom set pre 方式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>js练习 js是脚本语言直接运行在浏览器上的。</title> <script type="text/javascript"> function addcontent(){ document.getElementById("span01").innerHTML="<img src=‘pic/star-off.png‘>"; } </script> </head> <body> <span id="span01"> </span> <input type="button" value="增加图片" onclick="addcontent();"> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>js练习 js是脚本语言直接运行在浏览器上的。</title> <script type="text/javascript"> function addpic(){ //第一步创建一个dom元素 var imgdom=document.createElement("img"); //第二步引用方法 imgdom.setAttribute("src","pic/star-on.png"); //把元素节点的值给她 document.getElementById("div1").appendChild(imgdom); } </script> </head> <body> <div id="div1"> </div> <input type="button" value="添加" onclick="addpic()"> </body> </html>
总结:第一种方式添加只能添加一张图片,第二种可以添加很多张图片(先创建dom元素,然后给dom元素赋值,最后添加dom元素到div中去)。
标签:append -o htm 元素 ddc dom set pre 方式
原文地址:http://www.cnblogs.com/gongxuanming/p/7044734.html