JavaScript 動態建立標記

時間 2019-11-20

原文原文鏈接

網頁的結構由標記負責建立，JavaScript函數只用來改某些細節而不改變其底層結構，js也可用來改變網頁的結構和內容：javascript

傳統方法：1.document.write 快捷將文檔插入到網頁中：html

 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>

可是違背了「行爲應該與表現分離」的原則，不建議使用；java

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內容寫入元素，以下所示：app

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元素中：一、建立一個新的元素，二、把新元素插入節點樹spa

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 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。