除去五一三天，我已经和《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>标签。

　　举例：

 <html>

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

 <title>innerHTML</title>

 <script>

 window.onload = function(){

     vartestdiv = document.getElementById("testdiv");

     alert(testdiv.innerHTML);

 }

 </script>

 </head>

 <body>

 <div id = "testdiv">

 <p>This is <em>my</em> content.</p>

 </div>

 </body>

 </html>

　　appendChild()：

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

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

 <!DOCTYPE html>

 <html>

 <body>

 <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>

 <ul id="myList2"><li>Water</li><li>Milk</li></ul>

 <p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>

 <button onclick="myFunction()">亲自试一试</button>

 <script>

 functionmyFunction()

 {

 var node=document.getElementById("myList2").lastChild;

 document.getElementById("myList1").appendChild(node);

 }

 </script>

 </body>

 </html>

　　执行前界面：

　　点击按钮后：

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

　　insertBefore（newElement，targetElement）：

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

　　举例：

 <html>

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

 <title>document write</title>

 <script>

 window.onload = function(){

 var target = document.getElementById("p2");

     var para = document.createElement("p");

     para.innerHTML = "我是插队的"

     vartestdiv = document.getElementById("testdiv");

     testdiv.insertBefore(para,target);

 }

 </script>

 </head>

 <body>

 <div id = "testdiv">

 <p id = "p1">我是第一</p>

 <p id = "p2">我是第二</p>

 <p id = "p3">我是第三</p>

 </div>

 </body>

 </html>

　　执行后：

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

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

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

友情赞助

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

　　　　1. 支付宝　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信

　　　　　　　　　　　　　　　　　　　　　　

初探JavaScript（二）——JS如何动态操控HTML的更多相关文章

  1. JavaScript (二) js的基本语法 - - 运算符、流程控制

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.运算符 1.一元运算符 ++ -- 都是运算符 ++ 和 -- 可以分为:前+ 和后+ and 前- ...

  2. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  3. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  4. JavaScript二(第一个js程序)

    一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...

  5. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

  6. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  7. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  8. Vue.js Ajax动态参数与列表显示

    一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...

  9. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

随机推荐

  1. Linux学习进阶路线图

    摘自:http://blog.csdn.net/zdwzzu2006/article/details/4334791 Linux 基础 Linux 基础 Linux安装专题教程 Linux中文环境 L ...

  2. Asp.Net Web API 2第十课——使用OWIN自承载Web API

    详情请查看http://aehyok.com/Blog/Detail/71.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  3. Android setTag方法的key问题

    android在设计View类时,为了能储存一些辅助信息,设计一个一个setTag/getTag的方法.这让我想起在Winform设计中每个Control同样存在一个Tag. 今天要说的是我最近学习a ...

  4. Kinect for Windows SDK 1.8的改进及新特性

    今年3月, 微软推出了Kinect for Windows SDK 1.7 更新,包括了手势识别 Kinect Interactions 和实时 3D 建模 Kinect Fusion 两项新技术. ...

  5. [ZigBee] 8、ZigBee之UART剖析·二（串口收发）

    前言:上一节讲UART基本知识介绍完了,并深入剖析了一个串口发送工程,本节将进一步介绍串口收发! 1.初始化 在串口初始化部分,和上一节不同的地方是: 51 U0CSR |= 0x40; //允许接收 ...

  6. 三天学会HTML5 ——多媒体元素的使用

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...

  7. osgi dm

    看了http://developer.51cto.com/art/200909/154863.htm 真心感到,最强大最有组织的技术网站还是 51cto,牛人应该也是最多的. 以前逛51cto的比较少 ...

  8. 我的c程序

    想写一个不同机器通信获取状态的c程序.遇到无数困难.断断续续了3.4周了,得到的结果仍然无法面世. 我想还是把其中遇到的所有困难写下来吧! 下面是结果 #include <stdlib.h> ...

  9. CGFloat Float 互转

    直接上代码吧 var positionX:CGFloat = 10 var positionY:CGFloat = 20 var tmpX:Float = 30 var tmpY:Float = 40 ...

  10. Ubuntu 12.04下GAMIT10.40安装说明

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0225/164.html?1456481297 Ubuntu 12.04下GAMIT10.40安装步 ...