當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 动态创建标记
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 动态创建标记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
網頁的結構由標記負責創建，JavaScript函數只用來改某些細節而不改變其底層結構，js也可用來改變網頁的結構和內容：
傳統方法：1.document.write 快捷將文檔插入到網頁中：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>text</title> 6 </head> 7 <body> 8 <script> 9 document.write("<p> This is inserted.</p>"); 10 </script> 11 </body> 12 </html>但是違背了“行為應該與表現分離”的原則，不建議使用；
2.innerHTML屬性：可以用來讀寫某給定元素的HTML內容，標準化的DOM像手術刀一樣精細，二innerHTML屬性則像一把大錘一樣粗放：
1 <!DOCTYPE html>//test.html 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>text</title> 6 </head> 7 <body> 8 <script> 9 document.write("<p> This is inserted.</p>"); 10 </script> 11 <div id="testdiv"> 12 <p id="yourbody">This is <em>my</em> content.</p> 13 </div> 14 <script type="text/javascript" src="example.js"></script> 15 </body> 16 </html> 1 window.onload = function(){//examlple.js 2 //if (document.getElementById("testdiv")) alert("get testdiv"); 3 var testdiv = document.getElementById("testdiv"); 4 alert(testdiv.innerHTML); 5 6 //if (document.getElementById("yourbody")) alert("get yourbody"); 7 var testid = document.getElementById("yourbody"); 8 alert(testid.innerHTML); 9 }innerHTML不僅可以用來讀取元素的HTML內容，還可以用它把HTML內容寫入元素，如下所示：
1 window.onload = function() { 2 var testdiv = document.getElementById("testdiv"); 3 testdiv.innerHTML = "<p>You know what? <em>I can change your life!<em></p>"; 4 } 5 //在js里添加function修改id=testdiv的元素的HTML內容3.DOM方法：在瀏覽器看來，DOM節點樹才是文檔，在DOM看來，一個文檔就是一個節點樹。
將一段文本插入到testdiv元素中：1、創建一個新的元素，2、把新元素插入節點樹
1 window.onload = function() { 2 var para = document.createElement("p");//創建元素節點 3 var testdir = document.getElementById("testdiv"); 4 testdir.appendChild(para); 5 var txt = document.createTextNode("You know that! <em>I can change your life!</em>");//創建文本節點 6 para.appendChild(txt); 7 }?
轉載于:https://www.cnblogs.com/2014-cjs/p/3648473.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的JavaScript 动态创建标记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 添加Godaddy二级域名子域名方法
- 下一篇： JavaScript_process01