JS获取标签内容的方法
JS获取标签内容的方法
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<p>这有个 第一个p</p>
<p>这有个第二个p</p>
<span>这是个
span</span>
<br>
<a href="#">这有个a标签</a>
</div>
</body>
</html>
1.innerHTML
此方法可获取标签中的所有的内容，包括标签、空格、文本、换行等。
想要清空标签的内容，innerHTML = ""；即可
如果想要设置标签中的内容，innerHTML = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。
JS代码和效果图如下：
<script>
var box = document.getElementById('box');
// 获取标签的内容
var box1 = box.innerHTML;
var box2 = document.getElementById('box').innerHTML;
console.log(box1);
</script>
<script>
//替换标签内容
var box = document.getElementById('box');
box.innerHTML = '<h3>你们被我h3替换啦！！！</h3>';
console.log(box);
</script>
2.innerText
此方法获取标签(及其子标签)中的所有文本，不会获取标签（或者说可以过滤掉所有的标签）。如果有多个空格或者是换行，解析为一个空格。
如果想要清空标签的内容，innerText = ""；即可
如果想要设置标签中的内容，innerText = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。但是标签不会被解析，会直接以文本的形式打印在页面中。
<script>
//获取标签机器子标签的所有文本内容
var box = document.getElementById('box');
var box2 = box.innerText;
console.log(box2);
</script>
<script>
//修改标签文本内容，内容中包含的标签不会被解析，会文本输出
var box = document.getElementById('box');
box.innerText = '<p>这里有个p，来看一下</p>'
</script>
3.texContent
textContent来获取标签中的内容。但是textContent在过滤掉标签时，会保留标签结构。
innerText兼容性问题处理JS代码：
<script>
// 处理innerText的浏览器兼容性问题
function getInnerText(element) {
if (typeof element.innerText === 'string') {
return element.innerText;
} else {
return element.textContent;
}
}
</script>
JS获取标签内容的方法的更多相关文章
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- （转）用JS获取地址栏参数的方法（超级简单）
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- js获取url参数的方法
js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- js获取url传值的方法
这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...
- appium获取Toast内容的方法
做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...
- js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
- JS清除选择内容的方法
本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...
- JS---DOM---设置和获取---标签内容和文本内容
设置和获取---标签内容和文本内容 总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...
随机推荐
- Educational Codeforces Round 76 (Rated for Div. 2) E. The Contest
Educational Codeforces Round 76 (Rated for Div. 2) E. The Contest(dp+线段树) 题目链接 题意: 给定3个人互不相同的多个数字,可以 ...
- Jenkins: QQ/Wechat机器人群消息通知Job构建结果
简介 Jenkins是持续化集成的一个核心部件,它上游从仓库(gitlab)等拉取代码,经编译构建,将应用发布至下游目标环境:构建结果通知的方式有很多,现成的插件有邮件和钉钉方式,但是就方便的角度,通 ...
- meta的作用
一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...
- idea快速创建一个类 实现一个接口
一 创建一个接口类 二 点击接口名称 按alt + ent 三 选择implement interface 选项 完美!!!!!!!
- golang 自定义接口 和 实现接口
/* 定义: type 接口名 interface{ 方法名(可选:参数列表) 可选:返回值列表 || (可选:返回值列表) } 例:type Writer interface { Write(p [ ...
- shell 颜色输出
#!/bin/bash function display_method(){ clearDisplayMetho=0 if [ $displayMethod -eq 0 ]; then echo -e ...
- asp.net core 3.x 授权中的概念
前言 预计是通过三篇来将清楚asp.net core 3.x中的授权:1.基本概念介绍:2.asp.net core 3.x中授权的默认流程:3.扩展. 在完全没有概念的情况下无论是看官方文档还是源码 ...
- mac 经常使用的快捷键操作
##### touch bar 作用1: 打开项目的一些快捷操作键. 作用2: 右侧的< 打开有一些以前的常规操作. ##### 手势 ##### mac自带的一些操作 cmd + opt + ...
- 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...
- Java自学-多线程 同步synchronized
Java 多线程同步 synchronized 多线程的同步问题指的是多个线程同时修改一个数据的时候,可能导致的问题 多线程的问题,又叫Concurrency 问题 步骤 1 : 演示同步问题 假设盖 ...