JS怎么只用一个循环给页面多个元素赋值

Posted 2023-03-23

json中有很多数据，html中使用了同一个id名字为前缀然后加了下划线对应json数据中相应的名称，怎样一次统一赋值

参考技术A 加一个同一的class 通过该class进行元素获取然后循环 参考技术B document.querySelectorAll('[id^="batchInfo"]]).forEach(function()
this.title="a";//添加属性
)

使用选择器选择所有这个前缀的ID，然后统一赋值。

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

参考技术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");