javascript中的innerHTML和innerText的知識點
阿新 • • 發佈：2018-12-11
javascript中的innerHTML和innerText的知識點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript中的innerHTML和innerText的知識點,雪豹軟體工作室,javascript</title> <link rel="stylesheet" type="text/css" href="mark.css"> <link rel="stylesheet" type="text/css" href="body.css"> </head> <script type="text/javascript"> /*使用innerHTML也可以動態(在程式碼執行時)的給html新增刪除節點內容*/ /* innerHTML和innerText的區別 innerHTML：會解析執行其中的html程式碼 innerText：不會解析執行其中的html程式碼,整個內容原樣，原原本本的顯示 innerHTML與createElement,appendChild這些dom方式程式設計比較，優點是：簡單，程式碼較少 缺點是：沒有後者靈活，功能強大。 最好是2種方式配合使用 */ //向div中插入圖片 function insertImg() { var divNode = document.getElementById("myDiv"); var imgNode = '<img src="img/cry6.gif" title="哈哈，測試圖片">'; //直接寫html程式碼 //divNode.innerHTML = imgNode; divNode.innerHTML = divNode.innerHTML + imgNode;//在原來的內容後面追加內容 } //向div中插入form表單(innerHTML會覆蓋掉原來的內容,想保留原來的內容的話，可以採用追加的方式) function insertForm() { var divNode = document.getElementById("myDiv"); //var formNode = '<form action=""><input name="message"><input type="button" value="留言"></form>'; var formNode = '<form>' + '<input name="message">' + '<input type="button" value="留言">' + '</form>'; //divNode.innerHTML = formNode; divNode.innerHTML = divNode.innerHTML + formNode;//在原來的內容後面追加內容 } //刪除div中的內容 function deleteMessage(){ var divNode = document.getElementById("myDiv"); divNode.innerHTML = ""; } //測試innerText function testInnerText(){ //alert("this = " + this); var divNode = document.getElementById("myDiv"); var formNode = '<form>' + '<input name="message">' + '<input type="button" value="留言">' + '</form>'; //divNode.innerText = divNode.innerText + formNode; divNode.innerText = formNode + "測試下單引號'雙引號\"的問題" + "我是單引號\'，如果最外面是雙引號的話，裡面的單引號加不加斜槓都可以"; } function testInnerText2(){ var divNode = document.getElementById("myDiv"); divNode.innerHTML = "<font color='red'>哈哈<br>呵呵</font><br><br><hr>"; divNode.innerText += "江西省贛州市於都縣"; //divNode.innerHTML += "江西省贛州市於都縣"; } </script> <body> <input type="button" value="測試"哈哈'testInnerText'" onclick="testInnerText()"> <input type="button" value='測試單引號和雙引號問題' onclick='alert("我是\"張三,我是雙引號\"我是單引號'哈哈")'> <input type="button" value="插入form表單" onclick="insertForm()"> <input type="button" value="插入圖片" onclick="insertImg()"> <input type="button" value="刪除" onclick="deleteMessage()"> <input type="button" value="測試innerText是否會保留<br>標籤(答案是會保留下<br>標籤)" onclick="testInnerText2()"> <hr> <div id="myDiv">這是div中原來的內容！</div> </body> </html>
