zoukankan      html  css  js  c++  java
  • jQuery对DOM节点进行操作(插入节点之在元素外部插入)

    1.定义和用法

      after(content):在被选元素之后插入内容

      示例:

    <body>
        <script type="text/javascript">
            //入口函数
            $(document).ready(function(){
                // 创建文本节点
                var $jsp = $("<h1>hello world</h1>")
                //插入
                $("#box").after($jsp)
            })
        </script>
        <div id="box">123</div>
    </body>

      输出:

       insertAfter(content):在被选元素之后插入内容

      示例:

    <body>
        <script type="text/javascript">
            //入口函数
            $(document).ready(function(){
                // 创建文本节点
                var $jsp = $("<h1>hello world</h1>")
                //插入
                $jsp.insertAfter($("#box"))
            })
        </script>
        <div id="box">123</div>
    </body>

      输出:

      before(content):在被选元素之前插入内容

      示例:

    <body>
        <script type="text/javascript">
            //入口函数
            $(document).ready(function(){
                // 创建文本节点
                var $jsp = $("<h1>hello world</h1>")
                //插入
                $("#box").before($jsp)
            })
        </script>
        <div id="box">123</div>
    </body>

      输出:

       insertBefore(content):在被选元素之前插入内容

      示例:

    <body>
        <script type="text/javascript">
            //入口函数
            $(document).ready(function(){
                // 创建文本节点
                var $jsp = $("<h1>hello world</h1>")
                //插入
                $jsp.insertBefore($("#box"))
            })
        </script>
        <div id="box">123</div>
    </body>

      输出:

  • 相关阅读:
    手机进水不要慌,四个步骤告诉您正确处理方法!
    2021-08-17:学习项目代码流程
    Docker使用Centos镜像安装Openssh服务
    OpenResty简介、下载流程、简单教学
    go接收者和锁注意事项
    PHPstorm精进
    centos7找回root密码
    功能测试
    删除排序数组中的重复项
    Java多线程
  • 原文地址:https://www.cnblogs.com/abner-pan/p/12857025.html
Copyright © 2011-2022 走看看