js 动态添加元素(div、li、img等)及设置属性的方法
把一串html标签赋给一个javascript变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂。如果用js动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解。
网页是由html标签一层层组成的,js也可以动态添加一层层的诸如div、li、img这样的标签。其实,不管是什么html标签,js动态创建的方法都差不多,接着就先从动态添加div开始。
一、js动态添加元素div
<divid="parent"></div> functionaddElementDiv(obj){ varparent=document.getElementById(obj); //添加div vardiv=document.createElement("div"); //设置div属性,如id div.setAttribute("id","newDiv"); div.innerHTML="js动态添加div"; parent.appendChild(div); }
调用:addElementDiv("parent");
二、js动态添加li
<ulid="parentUl"><li>原li</li></ul> functionaddElementLi(obj){ varul=document.getElementById(obj); //添加li varli=document.createElement("li"); //设置li属性,如id li.setAttribute("id","newli"); li.innerHTML="js动态添加li"; ul.appendChild(li); }
调用:addElementLi("parentUl");
三、js动态添加元素img
<ulid="parentUl"></ul> functionaddElementImg(obj){ varul=document.getElementById(obj); //添加li varli=document.createElement("li"); //添加img varimg=document.createElement("img"); //设置img属性,如id img.setAttribute("id","newImg"); //设置img图片地址 img.src="/images/prod.jpg"; li.appendChild(img); ul.appendChild(li); }
调用:addElementImg("parentUl");
以上这篇js动态添加元素(div、li、img等)及设置属性的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。