Heim Web-Frontend js-Tutorial 初学js 新节点的创建 删除 的步骤_javascript技巧

初学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的用法 我还是不太懂。。。以后还需要仔细探究下。。。
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Kann der inetpub-Ordner gelöscht werden? So löschen Sie schnell den Ordner „inetpub' auf dem Laufwerk C Kann der inetpub-Ordner gelöscht werden? So löschen Sie schnell den Ordner „inetpub' auf dem Laufwerk C Mar 13, 2024 pm 02:00 PM

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

So löschen Sie Xiaohongshu-Notizen So löschen Sie Xiaohongshu-Notizen Mar 21, 2024 pm 08:12 PM

So löschen Sie Xiaohongshu-Notizen

Welcher Ordner wird gefunden.000? Kann der Ordner „found.000' gelöscht werden? Welcher Ordner wird gefunden.000? Kann der Ordner „found.000' gelöscht werden? Mar 13, 2024 pm 08:52 PM

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? Stimmt es, dass Sie auf WeChat blockiert und gelöscht werden können und dauerhaft nicht hinzugefügt werden können? Apr 08, 2024 am 11:41 AM

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? Wie lösche ich Xiaohongshu-Veröffentlichungen? Wie kann ich nach dem Löschen wiederherstellen? Mar 21, 2024 pm 05:10 PM

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? Was ist die Datei hiberfil.sys? Kann hiberfil.sys gelöscht werden? Mar 15, 2024 am 09:49 AM

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 So löschen Sie den WeChat File Transfer Assistant vollständig._Einführung zum Schließen des WeChat File Transfer Assistant Mar 20, 2024 pm 08:31 PM

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? Wie sende ich Dateien an andere auf TikTok? Wie lösche ich an andere gesendete Dateien? Mar 22, 2024 am 08:30 AM

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

See all articles