Js-dom增删改

发布时间:2023-01-28 08:30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (){
            //创建一个广州节点,添加到#city下
            myClick("btn01",function (){
                //创建广州节点
  • 广州
  • //创建li元素节点 /* * 用于创建一个元素节点对象 * 需要一个标签名作为参数,将会根据该标签名创建元素节点对象 * 并将创建好的对象组我欸返回值返回 * */ var li = document.createElement("li"); /* * 创建广州文本节点 * */ var gzText = document.createTextNode("广州"); //将gzText设置为li的子节点 li.appendChild(gzText); //获取id为city的节点 var city = document.getElementById("city"); //将广州添加到city下 city.appendChild(li); }) //将广州插入#北京的前面 myClick("btn02",function (){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); city.insertBefore(li,bj); }) //使用广州节点替换北京节点 myClick("btn03",function (){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); city.replaceChild(li,bj); }) //删除bj节点 myClick("btn04",function (){ //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // city.removeChild(bj); bj.parentNode.removeChild(bj); }) //读取city内的html代码 myClick("btn05",function (){ //获取city var city = document.getElementById("city"); alert(city.innerHTML); }) //设置bj内部的代码 myClick("btn06",function (){ //获取id为bj的节点 var bj = document.getElementById("bj"); bj.innerHTML = "曹县"; }) myClick("btn07",function (){ //向city中添加广州 //获取city var city = document.getElementById("city"); /* * 使用innerhtml也可以完成dom操作 * */ // city.innerHTML += "
  • 广州
  • ";
    //创建一个li var li = document.createElement("li"); li.innerHTML = "广州"; city.appendChild(li); }) } function myClick(idStr,fun){ var btn = document.getElementById(idStr); btn.onclick = fun; } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个”广州“节点,添加到#city下</button></div> <div><button id="btn02">将广州插入#北京的前面</button></div> <div><button id="btn03">使用广州节点替换北京节点</button></div> <div><button id="btn04">删除bj节点</button></div> <div><button id="btn05">读取city内的html代码</button></div> <div><button id="btn06">设置bj内部的代码</button></div> <div><button id="btn07">创建一个”广州“节点,添加到#city下</button></div> </div> </body> </html>

    Js-dom增删改_第1张图片

    ItVuer - 免责声明 - 关于我们 - 联系我们

    本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

    桂ICP备16001015号