<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>js中常用追加元素的几种方法</title>

    <link rel="stylesheet" href="css/rest.css"/>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>

        .container {

            width: 1200px;

            padding: 10px;

            margin: 50px auto;

            border: 1px solid lightcoral;

        }

        #wrap {

            border: 1px solid lightseagreen;

        }

        .container p {

            height: 30px;

            line-height: 30px;

        }

        .btn-group {

            margin-top: 20px;

        }

        button {

            width: 80px;

            height: 32px;

            margin-right: 10px;

            line-height: 32px;

            text-align: center;

            border: 0px;

        }

    </style>

</head>

<body>

<div class="container">

    <div id="wrap">

        <p class="first">我是第一个子元素</p>

        <p class="second">我是第二个子元素</p>

    </div>

    <div class="btn-group">

        <button class="append">append</button>

        <button class="appendTo">appendTo</button>

        <button class="prepend">prepend</button>

        <button class="prependTo">prependTo</button>

        <button class="after">after</button>

        <button class="before">before</button>

        <button class="appendChild" οnclick="appChild()">appendChild</button>

        <button class="insertAfter">insertAfter</button>

        <button class="insertBefore">insertBefore</button>

    </div>

</div>

</body>

</html>

<script src="js/jquery-1.9.1.min.js"></script>

<script>

    $(function () {

        //append(),在父级最后追加一个子元素

        $(".append").click(function () {

            $("#wrap").append("<p class='three'>我是子元素append</p>");

        });

        //appendTo(),将子元素追加到父级的最后

        $(".appendTo").click(function () {

            $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));

        });

        //prepend(),在父级最前面追加一个子元素

        $(".prepend").click(function () {

            $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");

        });

        //prependTo(),将子元素追加到父级的最前面

        $(".prependTo").click(function () {

            $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));

        });

        //after(),在当前元素之后追加（是同级关系）

        $(".after").click(function () {

            $("#wrap").after("<p class='siblings'>我是同级元素after</p>");

        });

        //before(),在当前元素之前追加（是同级关系）

        $(".before").click(function () {

            $("#wrap").before("<p class='siblings'>我是同级元素before</p>");

        });

        //insertAfter(),将元素追加到指定对象的后面（是同级关系）

        $(".insertAfter").click(function () {

            $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));

        });

        //insertBefore(),将元素追加到指定对象的前面（是同级关系）

        $(".insertBefore").click(function () {

            $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));

        });

    });

    //appendChild(),在节点的最后追加子元素

    function appChild() {

        // 创建p节点

        var para = document.createElement("p");

        // 创建文本节点

        var node = document.createTextNode("我是子集appendChild新段落。");

        // 把文本节点添加到p节点里

        para.appendChild(node);

        // 查找div1

        var element = document.getElementById("wrap");

        // 把p节点添加到div1里

        element.appendChild(para);

    }

</script>

js中常用追加元素的几种方法的更多相关文章

  1. js中删除数组元素的几种方法

    1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  2. jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  3. python中删除某个元素的3种方法

    python中关于删除list中的某个元素,一般有三种方法:remove.pop.del 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除 举例说明: >>> st ...

  4. JS中常用的输出方式(五种)

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  5. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  6. js中判断对象类型的几种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  7. Java之——删除ArrayList中的反复元素的2种方法

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47414935 ArrayList是Java中最经常使用的集合类型之中的一个.它同意 ...

  8. js中字符串转换为数值的两种方法的区别

    在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt()   //将字符串转换为整型 parseFloat()  //将字符串转换为浮点型 转换函数在 ...

  9. JS中date日期初始化的5种方法

    创建一个日期对象: 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh ...

随机推荐

  1. [打基础]OI/ACM基本功&一些小功能的实现&一些错误（持续更新）

    基本功 前导0 如题,有时候需要把3输出成03这样子,可以调用 cout.width(x); ,x表示以几位,用 cout.fill(x); 来给出前导填充的内容,一般x以char的形式给出 例如可以 ...

  2. Python高级语法-多继承MRO相关-多继承顺序（4.5.1）

    @ 目录 1.说明 2.代码 关于作者 1.说明 使用类的魔法方法__mro__ 可以查看他的父类调用顺序 还有调用父类的构造方法的时候,使用super调用,里面有C3算法支持,不会重复调用相同的祖先 ...

  3. TCP实现网络通讯

    Tcp server的流程:1.创建套接字:2.bind绑定ip和port3.listen使套接字变为可以被动链接:4.accept等待客户端的链接(返回为服务器分配的客户端的句柄和地址)5.reci ...

  4. sql文件转换为excel文件

    最近经常需要把sql整理成excel,本人比较懒,所以写一个小工具,用到了jxl包.以前没有接触过,正好了解一下. 一.基础知识       jxl操作excel包括对象 Workbook,Sheet ...

  5. codeforces 1451D，一道有趣的博弈论问题

    大家好,欢迎来到codeforces专题. 今天选择的问题是Contest 1451场的D题,这是一道有趣简单的伪博弈论问题,全场通过的人有3203人.难度不太高,依旧以思维为主,坑不多,非常友好. ...

  6. 手撕redis分布式锁，隔壁张小帅都看懂了！

    前言 上一篇老猫和小伙伴们分享了为什么要使用分布式锁以及分布式锁的实现思路原理,目前我们主要采用第三方的组件作为分布式锁的工具.上一篇运用了Mysql中的select ...for update实现了 ...

  7. 字典实现：python-----VS----java

    对比python和java的字典数据结构,以下就LeetCode面试题 17.10. 主要元素为栗子,进行学习.是一道简单题目,重点看数据结构的运用与实现. 普通的思路,使用一个字典结构记录每个元素出 ...

  8. aix5.3安装httpd服务

    1.安装gcc(1)从IBM上下载 gcc-4.0.0-1.aix5.3.ppc.rpm gcc-cplusplus-4.0.0-1.aix5.3.ppc.rpm libgcc-4.0.0-1.aix ...

  9. 【C++】《C++ Primer 》第九章

    第九章 顺序容器 一.顺序容器概述 顺序容器(sequential container):为程序员提供了控制元素存储和访问顺序的能力.这种顺序不依赖于元素的值,而是与元素加入容器时的位置相对应. 不同 ...

  10. Kubernetes学习笔记之安装minikube并运行个简单应用程序

    前言:本笔记仅记录学习记录,可能存在错误!!!使用的环境是Ubuntu Desktop 20.04,也有用Windows 10 操作的,根据的文档是minikube的文档教程,链接:https://m ...