JS DOM innerHTML和innerText
在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本”
例如,我们用innerHTML来向HTML文档中添加一张图片:
document.body.innerHTML='<img class="pic" src="https://img2.baidu.com/it/u=1536235831,228402327&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=390" style="border:1px solid silver"/>';
再例如,获取innerHTML和innerText:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TEXT</title> <script src="js/index.js"></script> </head> <body> <p id="content"> <strong style="color:red;">测试</strong> </p> innerHMTL:<input id="txt1" type="text"/><br/> innerText:<input id="txt2" type="text"> </body> </html>
window.onload=function () { var oP = document.getElementById("content"); document.getElementById("txt1").value = oP.innerHTML; document.getElementById("txt2").value = oP.innerText; }
浏览器输出如下:
innerHTML
获取的是元素内部所有的内容,而innerText
获取的仅仅是文本内容🎶