将目标元素插入指定位置，删除子节点，替换子节点、应用之城市联动框

最新推荐文章于 2024-03-28 23:49:14 发布

原创

最新推荐文章于 2024-03-28 23:49:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#插入目标元素 #删除-替换子节点 #城市联动框

本文详细介绍了DOM操作中如何将目标元素插入指定位置，删除子节点以及替换子节点，并结合实例讲解了这些方法在实现城市联动框中的应用。重点强调了操作时需要注意直接父节点的概念。

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

一、将目标元素插入指定位置，删除子节点，替换子节点
1、elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。
注意： elt必须是oldNode的直接父节点。 table表格中的<tr>的直接父节点为<tbody>，浏览器默认添加的，而并不是<table>
2、elt.removeChild(child) 删除指定的子节点
3、elt.replaceChild(child) 替换指定的子节点
注意： elt必须是child的直接父节点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    //添加附件
    function addFile(){
    
    
        //先要创建一个tr对象
        var trNode = document.createElement("tr");
         //创建td对象
        var tdNode1 = document.createElement("td");
        var tdNode2 = document.createElement("td");
        //tdNode1.setAttribute()这种方法也可以
        tdNode1.innerHTML ="<input type='file'/>";
        tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
        //把td的节点添加到tr节点上
        trNode.appendChild(tdNode1);
        trNode.appendChild(tdNode2);

        var tbodyNode = document.getElementsByTagName("tbody")[