如果插入的元素简单可以,如果是复杂的就不适合
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 容易记忆