js设置和获取html和文本,JS
设置和获取---标签内容和文本内容
总结---设置:
使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容, 是有标签效果的
想要设置标签内容, 使用innerHTML
想要设置文本内容, innerText或者textContent, 或者innerHTML, 推荐用innerHTML
总结---获取:
innerText可以获取标签中间的文本内容, 但是标签中如果还有标签, 那么最里面的标签的文本内容也能获取.---获取不到标签, 但文本可以获取
innerHTML才是真正的获取标签中间的所有内容
1. 关于innerText和textContent
设置和获取文本内容
//点击按钮设置div中的文本内容
my$("btn").onclick = function () {
//设置标签中间的文本内容, 应该使用textContent属性
my$("dv").textContent = "this is div标签";
// my$("dv").innerText = "啊,这是div";
//获取标签中间的文本内容
console.log(my$("dv").textContent);
// console.log(my$("dv").innerText);
};
设置标签中的文本内容, 应该使用textContent属性, 谷歌, 火狐支持, IE8不支持
设置标签中的文本内容, 应该使用innerText属性, 谷歌, 火狐, IE8都支持
测试兼容的代码如下:
如果这个属性在浏览器中不支持, 那么这个属性的类型是undefined
判断这个属性的类型,是不是undefined, 就知道浏览器是否支持
设置任意的标签中间的任意文本内容
//设置任意的标签中间的任意文本内容
function setInnerText(element, text) {
//判断浏览器是否支持这个属性
if (typeof element.textContent == "undefined") {//不支持
element.innerText = text;
} else {//支持这个属性
element.textContent = text;
}
}
获取任意标签中间的文本内容
function getInnerText(element) {
if (typeof element.textContent == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
测试
my$("btn").onclick = function () {
//console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"), "哈哈,我又变帅了");
};
2. 关于innerText和innerHTML
如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
设置:
my$("btn").οnclick=function () {
//my$("dv").innerText="哈哈";//设置文本
//my$("dv").innerText="
这是一个p
";//设置html标签的代码//my$("dv").innerHTML="哈哈";
//my$("dv").innerHTML="
这是一个p
";//设置Html标签的};
获取的时候:
innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
innerHTML才是真正的获取标签中间的所有内容
//获取
my$("btn2").οnclick=function () {
//可以获取标签中的文本内容
//console.log(my$("dv").innerText);
console.log(my$("dv").innerHTML);
};
xpath获取标签对本身含内容, 获取html内容
通常使用xpath我们直接定位到标签后, 使用/text() 或 //text()来获取标签对之间的文本值, 但特殊情况下我们也需要获取标签本身含文本值, 操作如下: 文件为html, 标签对结构如下 ...
selenium获取标签中的文本
# 寻找文本所在的标签waitClickCompanyName = driver.find_elements_by_xpath('//div[@id="nsrzt"]//li') ...
jsoup获取标签下的文本(去除子标签的)
jsoup获取标签下的文本(去除子标签的)
Element content=doc.se ...
java正则 读取html 获取标题/超链接/链接文本/内容
java正则 读取html 获取标题/超链接/链接文本/内容 参考链接: ...
JS DOM用不同方法获取节点及对节点插入、复制和移除
操作节点的方法 appendChild() insertBefore() replaceChild() cloneNode() normalize() splitText() sppendChild( ...
js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
APP自动化 -- 获取toast元素的文本内容
一.toast元素 1.表现形式:toast元素就是下图中 “操作成功” 那个一闪而过的标签. 2.特殊点:因为一闪而过,时间太短,用UIAutomatorView截屏截不到. 二.获取方法 1.用 ...
设置UILabel可变高度(根据文本内容自动适应高度)
@property(nonatomic)UILabel *showLabel; // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...
随机推荐
关于InvokeRequired与Invoke
from:.shtml Windows 窗体中的控件被绑定到特定的线程,不具备线程安全性.因此,如果从另一个线程调 ...
iOS内部跳转问题
//打开地图 NSString*addressText = @" "; //@"1Infinite Loop, Cupertino, CA 95014&quo ...
Android——ImageSwitcher 图片切换
public class ImageSwitcherActivity extends Activity implements OnClickListener, ViewFactory { ...
c++各类变量汇总
一.局部变量和全局变量: (1)局部变量:局部变量也叫自动变量,它声明在函数开始,生存于栈,它的生命随着函数的返回而结束. #include int main(void ...
equals()与 == 比较,hashCode方法
1.Object类 Object类是java中一切类的父类,java中所有的类都直接或间接 继承自Object类 Object中定义的方法不多,原因在于,java的类多种多样 ...
python中的None
python中的None python中的None就相较于Java中的Null.python中就没有所谓的NULL.网络上很多的时候说的"python的Null"这个说法本身就是不 ...
软工实践第二次作业-sudoku
说明 Github项目地址 作业题目 解题思路 一开始拿到的时候,有一个思路,可以先填写全盘的"1",然后在插空填满全盘的"2".后来觉得自己理不清那个思路.遂 ...
oracle sql developer登录
1 登录Oracle SQL developer 时候要选择数据库连接,这里要区分cdb用户和pdb用户,cdb用户可以在cdb和pdb服务下登录,而pdb用户只能在pdb服务里面登录.比如sys用户 ...
Numpy知识(二)
ndarray的简单数学计算就和普通的a+b,a-b,a*b,a/b等类似. 关于ndarray的切片: arr[n]:寻找第n个元素(针对一维)arr[n:m]:从下标为n元素开始,截取到下标为m- ...
javaScript之jQuery框架
一.jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...