把一串 html 标签赋给一个 javascript 变量，除属性的值要用转义的双引号外，某些时候字符串还很长，显得有些复杂。如果用 js 动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。
网页是由 html 标签一层层组成的，js 也可以动态添加一层层的诸如 div、li、img 这样的标签。其实，不管是什么 html 标签，js 动态创建的方法都差不多，接着就先从动态添加 div 开始。
一、js 动态添加元素div
<div id="parent"></div> function addelementdiv(obj) { var parent = document.getelementbyid(obj); //添加 div var div = document.createelement("div"); //设置 div 属性，如 id div.setattribute("id", "newdiv"); div.innerhtml = "js 动态添加div"; parent.appendchild(div); }
调用：addelementdiv("parent");
二、js 动态添加li
<ul id="parentul"><li>原li</li></ul> function addelementli(obj) { var ul = document.getelementbyid(obj); //添加 li var li = document.createelement("li"); //设置 li 属性，如 id li.setattribute("id", "newli"); li.innerhtml = "js 动态添加li"; ul.appendchild(li); }
调用：addelementli("parentul");
三、js 动态添加元素img
<ul id="parentul"></ul> function addelementimg(obj) { var ul = document.getelementbyid(obj); //添加 li var li = document.createelement("li"); //添加 img var img = 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等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
更多js 动态添加元素(div、li、img等)及设置属性的方法。