初学js 新节点的创建 删除 的步骤
时间：2020-11-06 23:58:22|栏目：JavaScript代码|点击： 次
特羡慕写出这些特效的高级程序员。我想学习，可总是不知道怎么去思考，不知道怎么去逻辑。有时候也很着急，这些都不怕，幸好还有人教我，指点我，这是我比较幸运的。但是我过不了自己这关了，自己最大的缺点就是 逃避，不会做的就放弃了，不会了就不会了，也不敢问了。改，这个大缺点一定得改。以下，是洋哥指点我的学习技巧，思路清晰，效率也有很大的提高。。废话就不扯了，言归正传：
题目：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的用法 我还是不太懂。。。以后还需要仔细探究下。。。
栏 目：JavaScript代码
下一篇：ajax返回的json内容进行排序使用sort()方法实现
本文标题：初学js 新节点的创建 删除 的步骤
本文地址：http://www.codeinn.net/misctech/19841.html
