JS获取标签内容的方法

2023-07-12 16:58| 来源: 网络整理| 查看: 265

JS获取标签内容的方法测试代码 DOCTYPE html> Title 这有个第一个p 这有个第二个p 这是个 span 这有个a标签

1.innerHTML

此方法可获取标签中的所有的内容，包括标签、空格、文本、换行等。

想要清空标签的内容，innerHTML = ""；即可

如果想要设置标签中的内容，innerHTML = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。

JS代码和效果图如下：

var box = document.getElementById('box'); // 获取标签的内容 var box1 = box.innerHTML; var box2 = document.getElementById('box').innerHTML; console.log(box1);

//替换标签内容 var box = document.getElementById('box'); box.innerHTML = '你们被我h3替换啦！！！'; console.log(box);

2.innerText

此方法获取标签(及其子标签)中的所有文本，不会获取标签（或者说可以过滤掉所有的标签）。如果有多个空格或者是换行，解析为一个空格。

如果想要清空标签的内容，innerText = ""；即可

如果想要设置标签中的内容，innerText = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。但是标签不会被解析，会直接以文本的形式打印在页面中。

//获取标签机器子标签的所有文本内容 var box = document.getElementById('box'); var box2 = box.innerText; console.log(box2);

//修改标签文本内容，内容中包含的标签不会被解析，会文本输出 var box = document.getElementById('box'); box.innerText = '

这里有个p，来看一下

3.texContent

textContent来获取标签中的内容。但是textContent在过滤掉标签时，会保留标签结构。

innerText兼容性问题处理JS代码：

// 处理innerText的浏览器兼容性问题 function getInnerText(element) { if (typeof element.innerText === 'string') { return element.innerText; } else { return element.textContent; } }

【本文地址】

公司简介

联系我们