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等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。