初学js 新节点的创建 删除 的步骤
更新时间：2011年07月04日 23:26:57 作者：
对于js 我是个初学者 甚至还不入门，我比较喜欢js做出的特效。
特羡慕写出这些特效的高级程序员。我想学习，可总是不知道怎么去思考，不知道怎么去逻辑。有时候也很着急，这些都不怕，幸好还有人教我，指点我，这是我比较幸运的。但是我过不了自己这关了，自己最大的缺点就是 逃避，不会做的就放弃了，不会了就不会了，也不敢问了。改，这个大缺点一定得改。以下，是洋哥指点我的学习技巧，思路清晰，效率也有很大的提高。。废话就不扯了，言归正传：
题目：btton 按钮 一个添加 一个删除 ，点击添加按钮就会添加一个节点，点击删除按钮就会删除最后一个节点，添加的新元素点击一下就会被删除。
步骤一： 分析思路 做好准备工作 （结构 行为 表现 分离既是 html结构 js脚本 css样式 分离）
首先:搭建html 结构，定义下css样式，写基本的脚本（由于js脚本与html结构是分离的 所以）。
<div class="btns">
<input type="button" value="Add" id="addBtn"></input>
<input type="button" value="Remove" id="removeBtn"></input>
</div>
<div class="box" id="boxcon"></div>
js 分析：首先两个button 的onclick 事件，其次，把添加和删除都封装成 方法，以便调用函数，达到重用的目的。
window.onload = function() {
addBtn.onclick = function() {}
removeBtn.onclick = function() {}
}
步骤二： 写个创建的方法：创建新节点
function createEle() {
var newEle = document.createElement("div");// 定义新的元素节点变量
var newBtn = document.createElement("input");// 定义新的元素节点变量
var boxEle = document.getElementById ("boxcon");
//找到所要添加到里面的那个元素 既是上一级元素，这里用id标识符来查找
newEle.className="con";//赋予新建元素的属性 样式写在css里
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把新建的节点 添加到boxcon里
}
步骤三： 写删除方法：删除元素。
function removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
// 删除元素
}
步骤四：调用函数
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}
呵呵总算完成的差不多了， 别急 还有一个功能。最后的一个功能。。（添加的新元素点击一下就会被删除）
over了。。。呵呵 关于这个this的用法 我还是不太懂。。。以后还需要仔细探究下。。。
题目：btton 按钮 一个添加 一个删除 ，点击添加按钮就会添加一个节点，点击删除按钮就会删除最后一个节点，添加的新元素点击一下就会被删除。
步骤一： 分析思路 做好准备工作 （结构 行为 表现 分离既是 html结构 js脚本 css样式 分离）
首先:搭建html 结构，定义下css样式，写基本的脚本（由于js脚本与html结构是分离的 所以）。
复制代码 代码如下:
<div class="btns">
<input type="button" value="Add" id="addBtn"></input>
<input type="button" value="Remove" id="removeBtn"></input>
</div>
<div class="box" id="boxcon"></div>
js 分析：首先两个button 的onclick 事件，其次，把添加和删除都封装成 方法，以便调用函数，达到重用的目的。
复制代码 代码如下:
window.onload = function() {
addBtn.onclick = function() {}
removeBtn.onclick = function() {}
}
步骤二： 写个创建的方法：创建新节点
复制代码 代码如下:
function createEle() {
var newEle = document.createElement("div");// 定义新的元素节点变量
var newBtn = document.createElement("input");// 定义新的元素节点变量
var boxEle = document.getElementById ("boxcon");
//找到所要添加到里面的那个元素 既是上一级元素，这里用id标识符来查找
newEle.className="con";//赋予新建元素的属性 样式写在css里
newBtn.type ="button";
newBtn.value = " remove ";
boxEle.appendChild(newEle);// 把新建的节点 添加到boxcon里
}
步骤三： 写删除方法：删除元素。
复制代码 代码如下:
function removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
// 删除元素
}
步骤四：调用函数
复制代码 代码如下:
window.onload = function() {
addBtn.onclick = function() {
createEle();
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild);
}
}
呵呵总算完成的差不多了， 别急 还有一个功能。最后的一个功能。。（添加的新元素点击一下就会被删除）
over了。。。呵呵 关于这个this的用法 我还是不太懂。。。以后还需要仔细探究下。。。
相关文章
setTimeout方法是js中的延时方法，很多js的bug，只需要使用该方法延时一下，就会自动解决了，简直就是万能药方，也是我比较喜欢使用的最后手段。2006-12-12
这篇文章主要介绍了es6新特性之 class 基本用法 ,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
网页自动跳转代码收集2009-09-09
弹出层，并可以拖拽，好多人要，发出来共享一下 兼容IE6+, 各现代浏览器。2011-07-07
最近因为在flash项目中遇到as调用js函数马上弹出alert，在火狐浏览器下会卡死浏览器。介于这样我们重写alert，让alert弹出一个自定义的div弹层，来实现提示效果！2013-03-03
JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的Json配置文件，可以对小程序项目进行不同级别的配置2022-10-10
分页栏是网页上最常见不过的一个组件，本博文给出分页栏的一个web2.0标准示例，并作简要分析2011-11-11
这篇文章主要介绍了JS实现隐藏同级元素后只显示JS文件内容的方法,可实现将与js文件的同级元素全部隐藏,只显示js文件内容的功能,涉及javascript针对页面元素的遍历与属性修改相关技巧,需要的朋友可以参考下2016-09-09
前几天在朋友的iPhone上面玩了一个连锁泡泡游戏，头脑发热就想用js写一个。2009-09-09
这篇文章给大家详细介绍了JavaScript中的并行处理，一直以来，JavaScript 都并没有多线程的能力，而单线程在让开发者方便的同时，也使它一直不能处理计算量复杂的场景，唯一方法就是让服务端去做。下来通过这篇文章我们一起来看看详细介绍。2016-09-09
最新评论