100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > js设置和获取html和文本 JS---DOM---设置和获取---标签内容和文本内容

js设置和获取html和文本 JS---DOM---设置和获取---标签内容和文本内容

时间:2020-02-16 05:04:37

相关推荐

js设置和获取html和文本 JS---DOM---设置和获取---标签内容和文本内容

设置和获取---标签内容和文本内容

总结---设置:

使用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获取标签下的文本(去除子标签的)

Elementcontent=doc.se ...

java正则 读取html 获取标题/超链接/链接文本/内容

java正则 读取html 获取标题/超链接/链接文本/内容 参考链接:http://yijianfengvip./blog/static/17527343242785 ...

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:/Program/net/06/140033.shtml Windows 窗体中的控件被绑定到特定的线程,不具备线程安全性.因此,如果从另一个线程调 ...

iOS内部跳转问题

//打开地图 NSString*addressText = @" "; //@"1Infinite Loop, Cupertino, CA 95014&quo ...

Android——ImageSwitcher 图片切换

public class ImageSwitcherActivity extends Activity implements OnClickListener, ViewFactory { ...

c++各类变量汇总

一.局部变量和全局变量: (1)局部变量:局部变量也叫自动变量,它声明在函数开始,生存于栈,它的生命随着函数的返回而结束. #include intmain(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设计的宗旨 ...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。