欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-15 19:10:47
设置和获取 标签内容和文本内容 总结 设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作用是在标签中设置新的html标签内容, 是有标签效果的 想要设置标签内容, 使用innerHTML 想要设置文本 ......

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

 

总结---设置:

使用innertext主要是设置文本的, 设置标签内容, 是没有标签的效果的
innerhtml是可以设置文本内容
innerhtml主要的作用是在标签中设置新的html标签内容, 是有标签效果的
 
  1. 想要设置标签内容, 使用innerhtml 
  2. 想要设置文本内容, innertext或者textcontent, 或者innerhtml, 推荐用innerhtml
 

总结---获取:

  1. innertext可以获取标签中间的文本内容, 但是标签中如果还有标签, 那么最里面的标签的文本内容也能获取.---获取不到标签, 但文本可以获取
  2. 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);
    };

 

  1.   设置标签中的文本内容, 应该使用textcontent属性, 谷歌, 火狐支持, ie8不支持
  2.   设置标签中的文本内容, 应该使用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);
  };