初探JavaScript（二）——JS如何动态操控HTML
除去五一三天，我已经和《JavaScript Dom编程艺术》磨合了六天，第一印象很好。慢慢的，我发现这是一块排骨，除了肉还有骨头。遇到不解的地方就会多看几遍，实在不懂的先跳过，毕竟，初次接触JS，没有必要花费过多时间去钻死胡同，先混个脸熟，以后再来拜访也未尝不可嘛。就这样，踉踉跄跄、囫囵吞枣似的已经过五关斩六将，到达第十一章。
书中有几个章节并没有从语法、技术等层面介绍JavaScript，而是站在一个全局的角度，立足编程原则和习惯道破了我们该如何看待和使用这门语言，主要有以下几点：
- JavaScript语法相对简单，易学易用，基于该特性，是的JS具有两面性，一方面，容易学习和掌握，使得其能被大家在短时间内接受成为可能；另一方面，易学易用也以为着缺乏高水平的质量控制措施。
- 鉴于历史遗留问题（浏览器之争带来的后遗症），使得兼容问题一度成为JS发展路上的一大阻力，所以预留退路很重，简言之，JS代码的健壮性尤为重要。
- 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的更多相关文章
- JavaScript (二) js的基本语法 - - 运算符、流程控制
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.运算符 1.一元运算符 ++ -- 都是运算符 ++ 和 -- 可以分为:前+ 和后+ and 前- ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- Ext JS 如何动态加载JavaScript创建窗体
JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...
- JavaScript二(第一个js程序)
一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...
- 第十二篇 JavaScript(简称JS) 实现显示与隐藏
JavaScript JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...
- 初探JavaScript（一）——也谈元素节点、属性节点、文本节点
Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- Vue.js Ajax动态参数与列表显示
一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...
- js实现动态添加事件
js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...
随机推荐
- js继承理解（有引用）
具体栗子:http://www.cnblogs.com/ayqy/p/4471638.html(地下为自己理解总结,可能晦涩,链接详细) 1.父类实例赋予子类原型. 2.利用子类函数引用 父类.cal ...
- wlan-mcs来自百度百科
工作原理 802.11n射频速率的配置通过MCS(Modulation and Coding Scheme,调制与编码策略)索引值实现.MCS调制编码表是802.11n为表征WLAN的通讯速率而提出的 ...
- ubuntu常用配置
安装文件共享服务 0.更改本机主机名,修改 /etc/hostname文件(ubuntu默认都是ubuntu) 1.安装 #sudo apt-get install samba samba-commo ...
- 终于解决：升级至.NET 4.6.1后VS2015生成WCF客户端代理类的问题
在Visual Studio 2015中将一个包含WCF引用的项目的targetFramework从4.5改为4.6.1的时候,VS2015会重新生成WCF客户端代理类.如果WCF引用配置中选中了&q ...
- 【C语言学习】《C Primer Plus》第10章 数组和指针
学习总结 1.数组初始化方式: int a[]={1,2,3} int a[SIZE]={1,2,3} //SIZE是宏定义,数组初始化个数不能大于SIZE,否则报错:当个数小 //SIZE,自动补0 ...
- Python3实现TCP端口扫描器
本文来自 高海峰对 玄魂工作室 的投稿 作者:高海峰 QQ:543589796 在渗透测试的初步阶段通常我们都需要对攻击目标进行信息搜集,而端口扫描就是信息搜集中至关重要的一个步骤.通过端口扫描我们可 ...
- 渣渣小本求职复习之路每天一博客系列——TCP/IP协议栈（5）
前情回顾:一篇短短的博客明显不能满足TCP和UDP这两个饥渴的汉子,而且还被应用协议占了一小半的篇幅.在昨天结束之后,相信大家都基本对TCP/IP协议栈的轮廓有一个大概的印象了,能够对整体有所把握. ...
- 面向对象架构模式之：领域模型（Domain Model）
一:面向对象设计中最简单的部分与最难的部分 如果说事务脚本是 面向过程 的,那么领域模型就是 面向对象 的.面向对象的一个很重要的点就是:“把事情交给最适合的类去做”,即:“你得在一个个领域类之间跳转 ...
- MySQL主键设计
[TOC] 在项目过程中遇到一个看似极为基础的问题,但是在深入思考后还是引出了不少问题,觉得有必要把这一学习过程进行记录. MySQL主键设计原则 MySQL主键应当是对用户没有意义的. MySQL主 ...
- Git学习笔记（1）——安装，配置，创建库，文件添加到库
初次接触git,为了记忆深刻,把学习的简单流程记录下来. 本文记录了Git在Ubuntu上的安装,配置,以及创建版本库和往库中添加文件的过程. 1.Git的安装:(Ubuntu-Linux非常友好的安 ...