初学js 新节点的创建 删除 的步骤_javascript技巧
May 16, 2016 pm 06:05 PM特羡慕写出这些特效的高级程序员。我想学习,可总是不知道怎么去思考,不知道怎么去逻辑。有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的。但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了。改,这个大缺点一定得改。以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高。。废话就不扯了,言归正传:
题目:btton 按钮 一个添加 一个删除 ,点击添加按钮就会添加一个节点,点击删除按钮就会删除最后一个节点,添加的新元素点击一下就会被删除。
步骤一: 分析思路 做好准备工作 (结构 行为 表现 分离既是 html结构 js脚本 css样式 分离)
首先:搭建html 结构,定义下css样式,写基本的脚本(由于js脚本与html结构是分离的 所以)。
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的用法 我还是不太懂。。。以后还需要仔细探究下。。。

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Kann der inetpub-Ordner gelöscht werden? So löschen Sie schnell den Ordner „inetpub' auf dem Laufwerk C

Welcher Ordner wird gefunden.000? Kann der Ordner „found.000' gelöscht werden?

Stimmt es, dass Sie auf WeChat blockiert und gelöscht werden können und dauerhaft nicht hinzugefügt werden können?

Wie lösche ich Xiaohongshu-Veröffentlichungen? Wie kann ich nach dem Löschen wiederherstellen?

Was ist die Datei hiberfil.sys? Kann hiberfil.sys gelöscht werden?

So löschen Sie den WeChat File Transfer Assistant vollständig._Einführung zum Schließen des WeChat File Transfer Assistant

Wie sende ich Dateien an andere auf TikTok? Wie lösche ich an andere gesendete Dateien?
