js创建节点删除节点实例

废话不多说先上效果图，点击边框外的按钮对应显示在边框内，当点击小叉叉的时候消失，
简单的运用js的创建节点以及删除节点

先写一下css代码：

.odiv {width: 300px;height: 300px;border: 1px solid #999;margin: 0 auto;}.btnGlup {/*width: 100px;*/height: 50px;text-align: center;line-height: 50px;}.odiv p {width: 60px;height: 30px;float: left;margin-left: 10px;border: 1px solid #999;line-height: 30px;}.odiv span {float: right;font-weight: 900;}

接下来是html代码：

    <div class="odiv"></div><div class="btnGlup"><button>语文</button><button>数学</button><button>英语</button><button>历史</button><button>地理</button><button>政治</button></div>
原生js的增加节点及删除节点操作// 获取节点var oBtn=document.querySelectorAll("button")var odiv=document.querySelector(".odiv")for (var i=0 ;i<oBtn.length; i++ ) {//点击按钮时床架标签 及删除按钮oBtn[i].onclick=function(){var creatP=document.createElement("p")var creatX=document.createElement("span")// 获取文本var theword=this.innerText//添加文本内容creatX.innerHTML="x"creatP.innerHTML=theword creatP.appendChild(creatX)odiv.appendChild(creatP)//获取删除按钮节点var oSpan=document.querySelectorAll(".odiv span")for (var i=0 ;i<oSpan.length;i++ ) {//点击删除按钮时删除元素oSpan[i].onclick=function(){this.parentNode.remove()}}}}好了就这么多了 很简单吧！

js创建节点删除节点实例相关推荐

利用云数据库 MongoDB ，为你的业务创建单节点实例
本文以一个例子介绍了如何使用 ACM 的命名空间(Namespace)功能,为应用在测试.预生产和生产环境下的同一个配置设置不同的值. 背景信息在本示例任务中,我们将使用 ACM 的命名空间(Nam ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
vue.js创建网站实例1
搭建项目环境网上的教程很多,随便搜一个,参考: https://blog.csdn.net/weixin_43844158/article/details/89788002 1)下载并安装node. ...
js添加多个子节点_javascript如何创建子节点
学习完HTM年据业会效近轻业务进果近轻业务进果近轻业L+css后,我并没有直接去学习HTML5和css3,而是开始学习JavaScript,现在就是jQuery基础也懂一点,js也懂一点,css3也懂 ...
【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
Vue3 安装在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...
node.js创建网站实例3
node.js访问mysql数据库并把查询结果返回给前端 1.cmd中运行:npm install mysql -s 2.修改api.js的代码 // 1.先引入express模块,express是一 ...
js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...
在一个Web页面中,需要弹出一个提示信息显示给用户.基于这个需求,要使用document.createElement()创建一个DOM节点.创建完节点后,还要使用appendChild()或inser ...
js创建节点及节点操作
1.创建元素节点 createElement(); 2.创建文本节点 createTextNode(); 3.给当前节点添加一个字节点 appendChild(); 4.删除子节点 removeChi ...
第三节：创建一个Vue实例，超简单
最近事多,更新稍慢了点,距离第二节推送快一周了. 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么, ...

js创建节点删除节点实例

js创建节点删除节点实例相关推荐

最新文章

热门文章