将1段html源码复制到另外1段html源码的body标签中,展示到网页上会显示源码的标签名称,如何只显示每个标签的文本内容。
时间: 2023-05-25 07:02:47 浏览: 63
可以使用JavaScript的textContent属性来获取标签的文本内容,然后将其插入页面中。具体步骤如下:
1. 在目标html页面中添加一个空的<div>标签,用于存放要展示的文本内容。例如:
<div id="content"></div>
2. 在JavaScript中获取原始html的body标签和目标div标签,然后遍历body中的所有子节点。对于每个子节点,如果是元素节点,获取其文本内容并添加到目标div中。如果是文本节点,直接将其内容添加到目标div中。例如:
let body = document.querySelector("body");
let content = document.querySelector("#content");
for (let i = 0; i < body.childNodes.length; i++) {
let child = body.childNodes[i];
if (child.nodeType === Node.ELEMENT_NODE) {
content.textContent += child.textContent;
} else if (child.nodeType === Node.TEXT_NODE) {
content.textContent += child.nodeValue;
}
}
3. 最后在页面中展示目标div即可。例如:
<body>
<div id="content"></div>
<script>
//上述JavaScript代码
</script>
</body>
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)