| 标题 | js 动态添加元素(div、li、img等)及设置属性的方法 |
| 内容 | 下面小编就为大家带来一篇js 动态添加元素(div、li、img等)及设置属性的方法。小编觉得听不错的，现在就分享给大家，也给大家做个参考。 把一串 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等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。