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获取的仅仅是文本内容

  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()就不适合了

  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 容易记忆

标签：oImg,appendChild,元素,innerHTML,innerText,document
来源： https://www.cnblogs.com/qiqi9/p/14187155.html