Web API---DOM---设置和获取---标签内容和文本内容
程序员文章站
2022-06-15 19:10:47
设置和获取 标签内容和文本内容 总结 设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作用是在标签中设置新的html标签内容, 是有标签效果的 想要设置标签内容, 使用innerHTML 想要设置文本 ......
设置和获取---标签内容和文本内容
总结---设置:
使用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").onclick=function () { //my$("dv").innertext="哈哈";//设置文本 //my$("dv").innertext="<p>这是一个p</p>";//设置html标签的代码 //my$("dv").innerhtml="哈哈"; //my$("dv").innerhtml="<p>这是一个p</p>";//设置html标签的 };
获取的时候:
innertext可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
innerhtml才是真正的获取标签中间的所有内容
//获取 my$("btn2").onclick=function () { //可以获取标签中的文本内容 //console.log(my$("dv").innertext); console.log(my$("dv").innerhtml); };
上一篇: C# 内部类与Lambda表达式用法详解
下一篇: Unity计时器功能实现示例