操作DOM与jQuery实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Zaiaj/article/details/78597955

本文介绍了一种使用原生JavaScript和jQuery操作DOM元素的方法，包括添加、删除、插入和编辑列表项。通过实际示例展示了如何实现这些基本操作。

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery_.js"></script>
    <script type="text/javascript">
        $(function(){
                attract();
                var $seldel = undefined;
                var seldel = undefined;
                function attract(){
                    //获取到li，给他赋一个点击的事件
                    $('li').click(function(){
                        $('li').css('background','pink');
                        this.style.backgroundColor = "green";
                        $seldel = $(this);
                        seldel = this;
                    });
                }
                //jq添加数据
                $('#btnAdd1').click(function(){
                    //弹窗
                    var input = window.prompt('输入数据');
                    var $newli = $('<li>'+input+'</li>');
                $newli.appendTo('#ol');
                    attract();
                });
                //DOM添加数据
                document.getElementById('btnAdd2').onclick = function(){
                    var input = window.prompt('输入数据');
                    //通过createElement创建一个空li；
                    var newli = document.createElement('li');
                    newli.innerHTML = input;
                    //通过appendChild把newli赋给ol
                    document.getElementById('ol').appendChild(newli);
                    attract();
                }
                //jq删除数据
                $('#btnDel1').click(function(){
                    $seldel.remove();
                });
                //DOM删除数据
                document.getElementById('btnDel2').onclick = function(){
                    //父节点，删除
                    seldel.parentNode.removeChild(seldel);
                }
                //jq插入
                $('#btnInsert1').click(function(){
                    var input = window.prompt('输入数据');
                    var $newli = $('<li>'+input+'</li>');
                    //用insertBefore在选中seldel,前插入newli
                    $newli.insertBefore($seldel);
                    attract();
                });
                //DOM插入
                document.getElementById('btnInsert2').onclick = function(){
                    var input = window.prompt('输入数据');
                    var newli = document.createElement('li');
                    newli.innerHTML=input;
                    var ol = document.getElementById('ol');
                                    //新的，旧的
                    ol.insertBefore(newli,seldel);
                    attract();
                }
                //jq编辑
                $('#btnEdit1').click(function(){
                    //获取选中的东西
                    var oldText = $seldel.html();

                    var $edit = $("<input id='btnE' type='text' value='"+oldText+"' />")
                    //把老的seldel换掉，把$edit设进去
                    $seldel.html($edit);
                    //聚焦 事件
                    $edit.focus();
                    //把新的值设进去
                    $edit.blur(function(){
                        //获取新的值，用户输入的值
                        var newTxt = $(this).val();
                        //在设置到$seldel里面去
                        $seldel.html(newTxt);
                    });
                });
                //DOM编辑
                document.getElementById('btnEdit2').onclick = function(){
                    var oldTxt = seldel.firstChild.nodeValue;
                    var input = '<input id="num" text="text" value="'+oldTxt+'">';
                    input.innerHTML = oldTxt;
                    seldel.innerHTML=input;
                    seldel.firstChild.focus();
                    seldel.firstChild.onblur = function(){
                        var number = document.getElementById('num').value;
                        seldel.innerHTML = number;
                    }


                }



        });

    </script>
</head>
<body>
    <ol id="ol">
        <li id="haha">1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
    </ol>
    <input id="btnAdd1" type="button" value="jquery添加数据" />
     <input id="btnAdd2" type="button" value="dom添加数据" />
     <input id="btnDel1" type="button" value="jquery删除数据" />
    <input id="btnDel2" type="button" value="dom删除数据" />
     <input id="btnInsert1" type="button" value="jquery插入数据" />
     <input id="btnInsert2" type="button" value="dom插入数据" />
    <input id="btnEdit1" type="button" value="jquery编辑数据" />
     <input id="btnEdit2" type="button" value="dom编辑数据" />


</body>
</html>