可通过innerhtml、textContent、innerText、nodeValue和replaceChild五种方法动态修改html元素文本内容:innerHTML解析HTML标签并替换全部子节点;textContent仅处理纯文本且更安全;innerText受css可见性影响;nodeValue直接操作文本节点;replaceChild底层替换文本节点。

如果您需要在网页中动态修改HTML元素的文本内容,可以通过javaScript操作dom来实现。以下是几种常用的方法:
一、使用innerHTML属性
innerHTML属性允许您读取或设置指定元素内部的HTML内容,包括标签和文本。它适用于需要插入含格式的HTML字符串的场景。
1、获取目标元素,例如通过document.getElementById(“demo”)选择ID为demo的元素。
2、将该元素的innerHTML属性赋值为新的字符串,例如element.innerHTML = “新内容“。
立即学习“前端免费学习笔记(深入)”;
3、浏览器会自动解析并渲染其中的HTML标签,原有子节点将被完全替换。
二、使用textContent属性
textContent属性仅操作纯文本内容,不解析HTML标签,安全性更高,且执行速度通常优于innerHTML。
1、通过document.querySelector(“.title”)获取具有class=”title”的元素。
2、设置其textContent属性为所需文本,例如element.textContent = “这是纯文本内容”。
3、所有HTML标签会被当作普通字符显示,不会被渲染为元素。
三、使用innerText属性
innerText属性与textContent类似,但会考虑css样式影响,例如隐藏元素的内容不会被包含在返回值中,且换行和空格会被规范化。
1、使用document.getElementsByTagName(“p”)[0]获取第一个段落元素。
2、将innerText设为新值,例如element.innerText = “可见区域的新文本”。
3、该属性受visibility和display等css属性影响,不可见内容不参与设置。
四、使用nodeValue属性(针对文本节点)
nodeValue用于直接操作DOM树中的文本节点,适用于精准控制某一段纯文本内容,需先定位到具体文本节点。
1、通过parentElement.firstChild访问父元素的第一个子节点。
2、确认该节点类型为Node.TEXT_NODE(nodeType === 3)。
3、修改其nodeValue,例如textNode.nodeValue = “更新后的文本”。
4、若目标不是文本节点,需先遍历childNodes找到对应Text节点再操作。
五、使用replaceChild方法替换文本节点
replaceChild提供更底层的DOM操作方式,可将旧文本节点完整替换为新创建的文本节点,适合需要保留节点引用关系的复杂场景。
1、创建新文本节点:const newText = document.createTextNode(“替换后的内容”)。
2、定位原文本节点,例如通过element.childNodes[0]获取。
3、调用element.replaceChild(newText, oldText)完成替换。
4、此方法要求明确指定父元素、新节点和旧节点,否则抛出DOMException错误。