DOM属性操作中CRUD操作

Posted monkey博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM属性操作中CRUD操作相关的知识，希望对你有一定的参考价值。

CRUD操作

1.append( )：父元素将子元素追加到末尾

　　对象1.append( 对象2 )：将对象2添加到对象1元素内部，并且在末尾

2.prepend( )：父元素将子元素追加到开头

　　对象1.append( 对象2 )：将对象2添加到对象1元素内部，并且在开头

3.appendTo( )：

　　对象1.append( 对象2 )：将对象1添加到对象2内部，并且在末尾

4.prependTo( )：

　　对象1.prependTo( 对象2 )：将对象2添加到对象1元素内部，并且在开头

5.after( )：添加元素到元素后边

　　对象1.after( 对象2 )：将对象2添加到对象1后边，对象1和对象2是兄妹关系

6.before( )：添加元素到元素前边

 　　对象1.before( 对象2 )：将对象2添加到对象1前边，对象1和对象2是兄妹关系

7.insertAfter(content)：

　　对象1.insertAfter( 对象2 )：将对象2添加到对象1后边。对象1和对象2是兄妹关系

8.insertBefore(content)：

 　　对象1.insertAfter( 对象2)：将对象2添加到对象1前边。对象1和对象2是兄妹关系

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
             div,span
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            
            
            div .mini
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            
            
            div.visible
                display:none;
            
     </style>
     <script type="text/javascript">
         $(function () 
             // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
             $("#b1").click(function () 
                //append
                 //$("#city").append($("#fk"));

                //appendTo
                 $("#fk").appendTo($("#city"));
             );

             // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function () 
                 //prepend
                 //$("#city").prepend($("#fk"));

                 $("#fk").prependTo($("#city"));
             );

             // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function () 
                 //after
                 // $("#tj").after($("#fk"));

                 $("#fk").insertAfter($("#tj"));
             );

             // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function () 
                 //before
                 // $("#tj").before($("#fk"));

                 $("#fk").insertBefore($("#tj"));
             );
         );
    </script>
     
     
    </head>
     
    <body>

        <input type="button" value="将反恐放置到city的后面"  id="b1"/>
        <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
        <input type="button" value="将反恐插入到天津后面"  id="b3"/>
        <input type="button" value="将反恐插入到天津前面"  id="b4"/>
         <ul id="city">
              <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>
         
         
          <ul id="love">
              <li id="fk" name="fankong">反恐</li>
             <li id="xj" name="xingji">星际</li>
         </ul>
        
        <div id="foo1">Hello1</div> 
       
    </body>
    
    
   
</html>

9.remove( )：移除元素

　　对象.remove()：将对象删除掉

10.empty()： 清空元素的所有后代子元素

　　对象.empty()：将对象后代元素全部清空，保留当前对象以及其属性节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
             div,span
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            
            
            div.mini
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            
            
            div.visible
                display:none;
            
     </style>
    <script type="text/javascript">
        $(function () 
            // <input type="button" value="删除<li id=\'bj\' name=\'beijing\'>北京</li>"  id="b1"/>
            $("#b1").click(function () 
                $("#bj").remove();
            );

            // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
            $("#b2").click(function () 
                $("#city").empty();
            );

        );
    </script>
    </head>
     
    <body>
    <input type="button" value="删除<li id=\'bj\' name=\'beijing\'>北京</li>"  id="b1"/>
    <input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>

         <ul id="city">
              <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>
         <p class="hello">Hello</p> how are <p>you?</p> 
    </body>
    
    
   
</html>

 

以上是关于DOM属性操作中CRUD操作的主要内容，如果未能解决你的问题，请参考以下文章

无法读取未定义 CRUD 操作的“_id”类型的属性

DOM

XML编程总结——使用DOM接口操作xml

这是在列表上执行 CRUD 操作的好方法吗

JavaWeb之JQuery

mybatisMyBatis的crud操作以及字段与属性不匹配的问题