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

在这里插入图片描述

添加(插入)

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

  1. 点击‘有请紫衫龙王’之后,在青翼蝠王的前面出现紫衫龙王
  2. 点击‘有请新教主’之后,在金毛狮王的前面出现张无忌
  3. 点击‘有请老教主’之后,在白眉鹰王的后面出现阳顶天
    在这里插入图片描述
    创建无需列表代码如下
<ul id="hero">
    <li id="li1">金毛狮王</li>
    <li id="li2">青翼蝠王</li>
    <li id="li3">白眉鹰王</li>
</ul>

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

创建元素

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

添加文本内容

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

添加到页面

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

<input type="button" value="有请紫衫龙王" onclick="gold()"> <br>
<input type="button" value="有请新教主" onclick="new1()"> <br>
<input type="button" value="有请老教主" onclick="old()"> <br>
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()

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

<table border="1" cellspacing="0" cellpadding="15">
    <tbody>
        <tr>
            <td>1</td>
            <td>努尔哈赤</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>皇太极</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>顺治</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>康熙</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
        </tr>
    </tbody>
</table>

大家已经看到了,我给每一个按钮都绑定了一个点击事件,当点击时会触发后面的函数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()

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

<table border="1" cellspacing="0" cellpadding="15">
    <tbody>
        <tr>
            <td>1</td>
            <td>努尔哈赤</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
            <td><input type="button" value="修改" onclick="update1(this)"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>皇太极</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
            <td><input type="button" value="修改" onclick="update1(this)"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>顺治</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
            <td><input type="button" value="修改" onclick="update1(this)"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>康熙</td>
            <td><input type="button" value="删除" onclick="delete1(this)"></td>
            <td><input type="button" value="修改" onclick="update1(this)"></td>
        </tr>
    </tbody>
</table>

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

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值