如何在js中循环赋值给页面上的li附上标签？

Posted 2023-03-14

参考技术A

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 动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。用代码的方式在js中给li附上标签。

一、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 动态添加元素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");