用js向html里面添加(插入)、删除与修改元素

2024-07-13 17:06| 来源: 网络整理| 查看: 265

在这里插入图片描述

添加(插入)

这里我们创建一个无序列表，当然了什么都可以，我们以无需列表来举例然后有三个按钮我们的需求是：

点击‘有请紫衫龙王’之后，在青翼蝠王的前面出现紫衫龙王点击‘有请新教主’之后，在金毛狮王的前面出现张无忌点击‘有请老教主’之后，在白眉鹰王的后面出现阳顶天在这里插入图片描述

创建无需列表代码如下金毛狮王青翼蝠王白眉鹰王

1.首先我们要往页面里面添加元素，就要先创建元素 2.接着给元素添加文本内容，或者说赋值 3.然后把我们创建的元素添加到页面里面

创建元素

用document.createElement(" ")去创建元素，引号里面写要创建的元素

添加文本内容

1.document.createTextNode(’ ') 2.appendChild()

添加到页面

insertBefore()或appendChild() 接下来看完整的代码这里我们采用给三个按钮绑定点击事件

javascript代码 let ul = document.getElementById('hero'); //紫衫龙王出现在青翼蝠王前面 function gold() { let li1 = document.createElement("li"); let text1 = document.createTextNode('紫衫龙王'); let li2 = document.getElementById('li2'); li1.appendChild(text1) ul.insertBefore(li1,li2) } //老教主出现在最后面 function old() { let li1 = document.createElement("li"); let text1 = document.createTextNode('阳顶天'); li1.append(text1) let ul = document.getElementsByTagName('ul').item(0); ul.append(li1) } //新教主出现在最前面 function new1() { let li1 = document.createElement("li"); let text1 = document.createTextNode('张无忌'); let li2 = document.getElementById('li1'); li1.append(text1) ul.insertBefore(li1,li2) } 删除removeChild()

这里我们创建一个简单地表格，里面存放清朝的一些皇帝在这里插入图片描述创建表格代码如下

1 努尔哈赤 2 皇太极 3 顺治 4 康熙

大家已经看到了，我给每一个按钮都绑定了一个点击事件，当点击时会触发后面的函数delete1(this)，参数this表示input 我们思路就是删除一整行，那我们就要获取这一行，那我们这里得到的是input，还不是tr，这时我们就要用input去获取到tr，js里面提供了一个方法parentElement，这个方法可以获取到父元素，input的一个父元素是td，那么再来一个父元素是不是就可以获取到tr了

javascript代码 function delete1(inp) { let tbody = document.getElementsByTagName('tbody').item(0); tbody.removeChild(inp.parentElement.parentElement) } 修改update()

这里我们还是用上面的表格，在后面加一个修改的按钮在这里插入图片描述

1 努尔哈赤 2 皇太极 3 顺治 4 康熙

这里我们采用弹框的方式来询问用户想要修改成什么，类似于java中的Scanner 修改与删除差不多，这里就不过多赘述

javascript代码 function update1(btn) { //1.接收数据 let num = prompt('请输入编号'); let name = prompt('请输入年号'); //2.修改 let tr = btn.parentElement.parentElement; tr.innerHTML=''+num+'\n' + ' '+name+'\n' + ' 删除\n' + ' 修改\n' + ' '; }

在这里插入图片描述

【本文地址】

公司简介

联系我们