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

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

 

总结---设置：

使用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);
  };