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

    1.定义和用法

      append(content):为所有匹配的元素的内部追加内容(在被选元素的结尾插入内容)

      示例:

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

      输出:

      appendTo(content):将所有匹配的元素添加到另一个元素集合中(在被选元素的结尾插入内容)

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

      输出:

      prepend(content):在被选元素的开头插入内容

      示例:

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

      输出:

      prependTo(content):将所有匹配的元素插入到另一个元素集合中的开头

      示例:

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

      输出:

  • 相关阅读:
    2021.01.28 Rating赛
    2021.01.23 Rating赛补题报告
    Codeforces Round #104 (Div.2)补题报告
    Codeforces Beta Round #73(Div2)补题报告
    11.28天梯赛补题报告
    11月22日天梯训练补题报告
    11.14补题报告
    CCNA笔记
    Centos上安装mysql配置并授权远程连接部署项目
    web容器(03):Nginx配置负载均衡
  • 原文地址:https://www.cnblogs.com/abner-pan/p/12856945.html
Copyright © 2011-2022 走看看