innerHTML 和 innerText

如想动态创建DOM元素,可将元素节点,属性节点 文本节点 一个个使用appendChild() 方法来拼凑
如果插入的元素简单可以,如果是复杂的就不适合

innerHTML :获取和设置一个元素的"内部元素" (获取的是元素内容部的所有内容) innerText :获取和设置一个元素的"内部文本" (获取的仅仅是文本内容)

实例1:动态创建图片
 window.onload = function () {
      //用appendChild()
       var oImg = document.createElement("img");
       oImg.className = "pic";
       oImg.src = "./images/bg-1.png";
       oImg.style.border = "solid green 2px";
       document.body.appendChild(oImg); 

      //如果用innerHTML来实现
      document.body.innerHTML = "<img class='pic' src='./images/bg-1.png' style='border:2px solid green'/>";
    }

 

实例2:innerHTML获取的是元素内部所有的内容
innerTxt获取的仅仅是文本内容
innerHTML 和 innerText
  window.onload = function () {
      var oP = document.getElementById("content");
      document.getElementById("txt1").value = oP.innerHTML;
      document.getElementById("txt2").value = oP.innerText;
    }

  <p id="content"><strong style="color:pink;">网站</strong></p>
  innerHTML是:<input id="txt1" type="text" /><br />
  innerText是:<input id="txt2" type="text" />

 


实例3:innerHTML后面的字符串可以换行来写
一般 代码里的字符串是不能换行的,但为了可读性 都希望把字符串截断分行显示
方法:只需在字符串每一行后面加上个反斜杠(\) 即可 ,如果下面这个例子用appendChild()就不适合了
innerHTML 和 innerText
  window.onload = function () {
      var oDiv = document.getElementsByTagName("div")[0];
      oDiv.innerHTML = "<span>绿叶学习网</span>\
                    <span style='color:pink;'>JavaScript</span>\
                    <span style='color:green;'>入门教程</span>";
    }

  <div></div>

innerHTML 与 innerText 的区别
HTML代码 innerHTML innerText
<div>学习网站</div> 学习网站 学习网站
<div><em>学习网站</em></div> <em>学习网站</em> 学习网站
<div><em></em></div> <b></b> (空字符串)

innerText 等价属性textcontent 效果是一样的, 从字面上innerText 刚好对应于innerHTML 容易记忆





















上一篇:python 操作xml方法,解析xml,创建xml,用列表字典的方式创建xml


下一篇:JS动态表格添加