修改js中的元素内容可通过操作dom实现，1. 使用innertext、textcontent修改文本，推荐textcontent以确保浏览器兼容性；2. 使用innerhtml修改html结构，但需防范xss攻击，应对用户输入内容进行转义，可借助dompurify库提升安全性；3. 还可通过createelement、createtextnode、appendchild等方法动态构建和插入节点，适用于复杂dom操作；4. 批量更新大量元素时，应使用documentfragment减少重排次数，或采用虚拟dom技术及requestanimationframe优化性能，从而提升页面渲染效率，完整操作需根据实际需求选择合适方法并兼顾安全与性能。
修改JS中的元素内容，其实就是操作DOM节点。简单来说，你可以直接替换掉元素的文本，也可以修改元素的HTML结构，甚至可以改变元素的属性。具体用哪种方式，取决于你想要达成的效果。
innerText、textContent、innerHTML，这三个属性是修改元素内容最常用的方式。innerText和textContent主要用于修改文本内容，而innerHTML则可以修改HTML结构。
innerText和textContent在不同的浏览器中可能存在差异，比如对空格的处理。所以，如果你需要兼容不同的浏览器，最好使用textContent。innerHTML的功能更强大，但使用不当可能会导致安全问题，比如XSS攻击。
如何使用innerText、textContent和innerHTML？
修改元素内容，最直观的方法就是直接操作这几个属性。比如，你想把一个段落的文本内容改成"Hello World"，只需要这样写：
const paragraph = document.getElementById("myParagraph");
paragraph.innerText = "Hello World";或者：
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "Hello World";如果要修改HTML结构，可以这样写：
const paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "Hello World";这样，段落的内容就会变成加粗的"Hello World"。
除了直接修改属性，还有其他方法吗？
除了直接修改innerText、textContent和innerHTML属性，你还可以使用
createElement、
createTextNode、
appendChild等方法来动态创建和添加元素。这种方式更加灵活，可以实现更复杂的DOM操作。
比如，你想在一个
ul元素中添加一个新的
li元素，可以这样写：
const ul = document.getElementById("myList");
const li = document.createElement("li");
const text = document.createTextNode("New item");
li.appendChild(text);
ul.appendChild(li);这段代码首先创建了一个新的
li元素，然后创建了一个包含文本内容的文本节点，接着把文本节点添加到
li元素中，最后把
li元素添加到
ul元素中。
修改元素内容时需要注意哪些安全问题？
在使用innerHTML修改元素内容时，一定要注意XSS攻击。XSS攻击是指攻击者通过在网页中注入恶意脚本，来窃取用户信息或者篡改网页内容。
为了避免XSS攻击，应该尽量避免使用innerHTML来修改元素内容，特别是当内容来自用户输入时。如果必须使用innerHTML，应该对内容进行转义，以防止恶意脚本被执行。
一种常见的转义方法是使用
DOMPurify库。这个库可以对HTML内容进行安全过滤，移除潜在的恶意代码。
const dirtyHTML = '@@##@@';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
document.getElementById('myElement').innerHTML = cleanHTML;如何高效地更新大量DOM元素？
频繁地操作DOM会影响网页的性能，特别是当需要更新大量DOM元素时。为了提高性能，可以考虑使用以下几种方法：
-
使用DocumentFragment： DocumentFragment是一个轻量级的DOM节点，可以用来批量添加DOM元素，然后再一次性地添加到文档中。这样可以减少DOM操作的次数，提高性能。
const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { const li = document.createElement("li"); li.textContent = `Item ${i}`; fragment.appendChild(li); } document.getElementById("myList").appendChild(fragment); 使用虚拟DOM： 虚拟DOM是一种将DOM结构保存在内存中的技术，可以用来比较新旧DOM结构的差异，然后只更新需要更新的部分。React、Vue等框架都使用了虚拟DOM技术。
-
使用requestAnimationFrame：
requestAnimationFrame
方法可以在浏览器重绘之前执行回调函数，可以用来优化动画效果和DOM更新。requestAnimationFrame(() => { // 执行DOM更新操作 });
