js的节点操作动态创建table表格，创建行，删除行_js 利用节点操作,实现表格中行的删除-CSDN博客

本文链接：https://blog.csdn.net/paidaboluo/article/details/121642005

这篇博客介绍了JavaScript中的节点操作，特别是如何动态创建和删除HTML表格的行。通过遵循W3C的HTML DOM标准，理解文档中的所有内容都是节点，并详细讲解了`insertBefore()`方法用于在现有子节点前插入新节点。此外，还讨论了创建DOM元素的三种方式，并提供了动态创建table及添加、删除行的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节点操作

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点

总的来说只要是在窗口内的都是节点，都可以通过DOM操作

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。

创建元素的三种方式

document.write()
弊端：只能往body中添加元素

document.write('<div class="box1">我是div</div>');

innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖

  document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

document.createElement()
父元素.appendChild(子元素)：给父元素末尾添加子元素

var pObj = document.createElement("p");

  divObj1.appendChild(pObj);

dom节点的案例动态创建table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击创建表格</button>
</body>
</html>
<script>
    //创建数组，准备数据
var a=[['百度','<a href="https://www.baidu.com/">百度</a>'],['掏包','<a href="https://www.taobao.com/">掏包</a>'],['并夕夕','<a href="https://youhui.pinduoduo.com/">并夕夕</a>']]
document.getElementById('btn').addEventListener('click',function(){
    //创建table
    table=document.createElement('table')
    document.querySelector('body').appendChild(table)
    for(var i=0;i<3;i++){//创建3个tr
        tr=document.createElement('tr')//创建tr
        for(var j=0;j<2;j++){
            td=document.createElement('td')//创建td
            td.style.border='1px red solid'//td样式
            td.innerHTML=a[i][j]//访问数组a
            tr.appendChild(td)//加到tr内
            
        }
        table.appendChild(tr)//tr加到table内
        
    }

    document.getElementById('btn').disabled=true//创建完成，按钮禁用
})


</script>

点击创建行，和删除行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr><td><button id="btn">添加</button></td></tr>
    </table>
</body>
</html>
<script>
    var i=0;
table=document.querySelector('table')
document.getElementById('btn').onclick=function(){//点击事件
    tr=document.createElement('tr')//创建tr
    for(var j=0;j<2;j++){
        td=document.createElement('td')//创建td
        td.style.border='1px red solid'
            button=document.createElement('button')//创建按钮删除和他的方法
            button.innerHTML='删除'
            button.onclick=function(){
            table.removeChild(this.parentElement.parentElement)
            }
        if(j==0){
            td.innerHTML=i++//第一个格子内容i++
        }
        else{
            td.appendChild(button)//第二个是按钮删除
        }
        tr.appendChild(td)//td见到tr内
            
        }
    table.appendChild(tr)//将内容加到table
}
</script>