初学js 新节点的创建 删除 的步骤_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的用法 我还是不太懂。。。以后还需要仔细探究下。。。

时间: 2024-08-28 04:57:48

初学js 新节点的创建 删除 的步骤_javascript技巧的相关文章

JS使用eval()动态创建变量的方法_javascript技巧

本文实例讲述了JS使用eval()动态创建变量的方法.分享给大家供大家参考,具体如下: 一.什么是eval()函数? eval_r()函数可计算某个字符串,并执行其中的的 JavaScript 代码. 二.如何动态定义变量? 既然eval()能够计算字符串,何不将定义变量的写法转换为字符串,然后放入eval_r()函数内进行执行,形如: var defineStr = "var number_"+i.toString(); eval_r(defineStr); 这样就定义了一个变量,你

js使用removeChild方法动态删除div元素_javascript技巧

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

JavaScript节点及列表操作实例小结_javascript技巧

本文实例总结了JavaScript节点及列表操作的方法.分享给大家供大家参考.具体如下: (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 appendChild() removeChild() replaceChild() insertBefore() (3)查找 getElementsByTagName() /

JS/jQuery判断DOM节点是否存在的简单方法_javascript技巧

JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

jQuery与JavaScript节点创建方法的对比_javascript技巧

一. 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素.属性.文本.文档和注释.但在实际开发中,要动态创建内容,主要操作的节点包括元素.属性和文本. 1.需求:创建一个h1 标签,把它作为div元素的子节点添加到DOM节点树中. 2.基本思路是:先创建一个h1元素对象,然后添加到文档中. 3.以下是两种实现方式: // jQuery方式 var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaSc

一种新的javascript对象创建方式Object.create()_javascript技巧

Object.create() 是什么?Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的. 例如: function Car (desc) { this.desc = desc; this.color = "red"; } Car.prototype = { getInfo: function() {

动态创建script在IE中缓存js文件时导致编码的解决方法_javascript技巧

先看下重现代码 1, gb2312.html 该文件编码为gb2312 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset="gb2312"/> <style> p { color: red; } </style> </head> <body> <button onclic

Ext JS动态加载JavaScript创建窗体的方法_javascript技巧

JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构: 项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等.  2 数据库表结构可以用下面的SQL在MSSQL中创建表,其中JavaScriptCo

jQuery和JavaScript节点插入元素的方法对比_javascript技巧

二.插入元素: <div> <p>面朝大海,春暖花开</p> </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 append() 向每个匹配的元素内部追加内容 appendTo() 把所有的元素追加到另一个指定的元素集合中,实际上是颠倒了append()的用法.如$(A).append(B)与$(B).appendto(A)是等价的 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置到另一个