用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>';
    }

标签：ul,text1,元素,js,插入,html,let,li1,document
来源： https://blog.csdn.net/lcszz0302/article/details/112785005