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 }

 

你可能感兴趣的:(JavaScript)