初探JavaScript（二）——JS如何动态操控HTML

　　除去五一三天，我已经和《JavaScript Dom编程艺术》磨合了六天，第一印象很好。慢慢的，我发现这是一块排骨，除了肉还有骨头。遇到不解的地方就会多看几遍，实在不懂的先跳过，毕竟，初次接触JS，没有必要花费过多时间去钻死胡同，先混个脸熟，以后再来拜访也未尝不可嘛。就这样，踉踉跄跄、囫囵吞枣似的已经过五关斩六将，到达第十一章。

　　书中有几个章节并没有从语法、技术等层面介绍JavaScript，而是站在一个全局的角度，立足编程原则和习惯道破了我们该如何看待和使用这门语言，主要有以下几点：

1. 　　JavaScript语法相对简单，易学易用，基于该特性，是的JS具有两面性，一方面，容易学习和掌握，使得其能被大家在短时间内接受成为可能；另一方面，易学易用也以为着缺乏高水平的质量控制措施。
2. 　　鉴于历史遗留问题（浏览器之争带来的后遗症），使得兼容问题一度成为JS发展路上的一大阻力，所以预留退路很重，简言之，JS代码的健壮性尤为重要。
3. 　　JavaScript代码分离。如何做到HTML负责构建页面元素，JavaScript负责行为，CSS负责布局，各司其职，这也是衡量JS语言质量或是开发者素质的标尺。

　　有了这些隐形的规范，更加有助于编码的规范。

　　下面介绍一些常用的方法，用于动态操控HTML元素：

　　document.write():

　　该方法能够方便快捷地把字符串插入到文档中。

　　该方法最大的缺点就是它违背了上面提到的JavaScript分离原则，即使把document.write语句挪到外部函数里，也还是需要在HTML文档的<body>部分使用<script>标签才能使用这个方法，也就是说它的存在很大程度的依赖于HTML中的标签和位置。

　　innerHTML:
　　该属性用来读、写某给定元素里的HTML内容。

　　该属性与document.write()方法功能类似，但是其能够有效实现JavaScript代码从HTML文档中分离出来，而不需要在HMTL文档的<body>部分插入<script>标签。

　　举例：

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 4 <title>innerHTML</title>
 5 <script>
 6 window.onload = function(){
 7     vartestdiv = document.getElementById("testdiv");
 8     alert(testdiv.innerHTML);
 9 }
10 </script>
11 </head>
12 <body>
13 <div id = "testdiv">
14 <p>This is <em>my</em> content.</p>
15 </div>
16 </body>
17 </html>

　　appendChild()：

　　该方法在指定元素的最后一个子节点之后添加节点。

　　举例（借用W3C上的案例）：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
 5 <ul id="myList2"><li>Water</li><li>Milk</li></ul>
 6 <p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
 7 <button onclick="myFunction()">亲自试一试</button>
 8 <script>
 9 functionmyFunction()
10 {
11 var node=document.getElementById("myList2").lastChild;
12 document.getElementById("myList1").appendChild(node);
13 }
14 </script>
15 </body>
16 </html>

　　执行前界面：

　　点击按钮后：

　　从两幅图可以看出，在Milk被append到myList1中时，其也会从myList2中消失。

　　insertBefore（newElement，targetElement）：

　　该方法把一个新元素插入到一个现有元素的前面。

　　举例：

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 4 <title>document write</title>
 5 <script>
 6 window.onload = function(){
 7 var target = document.getElementById("p2");
 8     var para = document.createElement("p");
 9     para.innerHTML = "我是插队的"
10     vartestdiv = document.getElementById("testdiv");
11     testdiv.insertBefore(para,target);
12 }
13 </script>
14 </head>
15 <body>
16 <div id = "testdiv">
17 <p id = "p1">我是第一</p>
18 <p id = "p2">我是第二</p>
19 <p id = "p3">我是第三</p>
20 </div>
21 </body>
22 </html>

　　执行后：

　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）。
　　insertBefore方法是在已有的节点前添加新的节点（相对于子节点来说的）。

　　本文链接：《初探JavaScript（二）——JS如何动态操控HTML》

　　如果对你有用，欢迎点赞哦，也欢迎加群讨论。

友情赞助

如果你觉得博主的文章对你那么一点小帮助，恰巧你又有想打赏博主的小冲动，那么事不宜迟，赶紧扫一扫，小额地赞助下，攒个奶粉钱，也是让博主有动力继续努力，写出更好的文章^^。

　　　　1. 支付宝　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信

posted @ 2015-05-06 21:07 JackieZheng 阅读(1578) 评论(2) 编辑收藏举报

刷新页面返回顶部

初探JavaScript（二）——JS如何动态操控HTML

公告