如想动态创建DOM元素，可将元素节点，属性节点 文本节点 一个个使用appendChild() 方法来拼凑
如果插入的元素简单可以，如果是复杂的就不适合
innerHTML :获取和设置一个元素的"内部元素" （获取的是元素内容部的所有内容）
如果插入的元素简单可以，如果是复杂的就不适合
innerHTML :获取和设置一个元素的"内部元素" （获取的是元素内容部的所有内容）
innerText :获取和设置一个元素的"内部文本" (获取的仅仅是文本内容）
实例1：动态创建图片
innerTxt获取的仅仅是文本内容
实例3：innerHTML后面的字符串可以换行来写
一般 代码里的字符串是不能换行的，但为了可读性 都希望把字符串截断分行显示
方法：只需在字符串每一行后面加上个反斜杠(\) 即可 ，如果下面这个例子用appendChild()就不适合了
innerHTML 与 innerText 的区别
HTML代码 innerHTML innerText
<div>学习网站</div> 学习网站 学习网站
<div><em>学习网站</em></div> <em>学习网站</em> 学习网站
<div><em></em></div> <b></b> (空字符串)
innerText 等价属性textcontent 效果是一样的， 从字面上innerText 刚好对应于innerHTML 容易记忆
实例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 容易记忆