3、JQuery——DOM的插入

来源：互联网发布：linux安装telnet服务编辑：程序博客网时间：2024/06/06 09:33

- JQueryDOM的操作
  - DOM创建节点
  - DOM插入
    - 1内部插入
    - 2内部插入
    - 1外部插入
    - 2外部插入

JQuery——DOM的操作

DOM创建节点

格式：

$("<div id='test' class='aaron'>我是文本节点</div>")

例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>    .left,    .right {        width: 300px;        height: 120px;    }    .left div,    .right div {        width: 100px;        height: 90px;        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;    }    .left div {        background: #bbffaa;    }    .right div {        background: yellow;    }    </style></head><body>    <h2>动态创建元素节点</h2>    <button>点击通过jQuery动态创建元素节点</button>    <p></p>    <script type="text/javascript">    $("button").on('click', function() {        //通过jQuery生成div元素节点        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")        $("p").append(div)    })    </script></body></html>

DOM插入

1、内部插入

.append()
(对象).append(插入内容)：前面是被插入的对象，后面是要在对象内插入的元素内容
.appendTo()
(内容).appendTo(对象)：前面是要插入的元素内容，而后面是被插入的对象
例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>    .content {        width: 300px;    }    .append{        background-color: blue;    }    .appendTo{        background-color: red;    }    </style></head><body>    <h2>通过append与appendTo添加元素</h2>    <button id="bt1">点击通过jQuery的append添加元素</button>    <button id="bt2">点击通过jQuery的appendTo添加元素</button>    <div class="content"></div>    <script type="text/javascript">        $("#bt1").on('click', function() {            //.append(), 内容在方法的后面，            //参数是将要插入的内容。            $(".content").append('<div class="append">通过append方法添加的元素</div>')        })    </script>    <script type="text/javascript">        $("#bt2").on('click', function() {            //.appendTo()刚好相反，内容在方法前面，            //无论是一个选择器表达式 或创建作为标记上的标记            //它都将被插入到目标容器的末尾。            $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))        })    </script></body></html>

2、内部插入

.prepend()
向每个匹配的元素内容前置（前面插入）内容
.prependTo()
把所有匹配的元素前置到另一个指定的元素集合

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>    .aaron1{        border: 1px solid red;    }    .aaron1 p {        color: red;    }    .aaron2{        border: 1px solid blue;    }    .aaron2 p {        color: blue;    }    </style></head><body>    <h2>通过prepend与prependTo添加元素</h2>    <button id="bt1">点击通过jQuery的prepend添加元素</button>    <button id="bt2">点击通过jQuery的prependTo添加元素</button>    <div class="aaron1">        <p>测试prepend</p>    </div>    <div class="aaron2">        <p>测试prependTo</p>    </div>    <script type="text/javascript">    $("#bt1").on('click', function() {        //找到class="aaron1"的div节点        //然后通过prepend在内部的首位置添加一个新的p节点        $('.aaron1').prepend('<p>prepend增加的p元素1</p>')    })    </script>    <script type="text/javascript">    $("#bt2").on('click', function() {        //找到class="aaron2"的div节点        //然后通过prependTo内部的首位置添加一个新的p节点        $('<p>prependTo增加的p元素1</p>').prependTo($('.aaron2'))    })    </script></body></html>

1、外部插入

.after()
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
.before()
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>    .aaron{        border: 1px solid red;    }    </style></head><body>    <h2>通过before与after添加元素</h2>    <button id="bt1">点击通过jQuery的before添加元素</button>    <button id="bt2">点击通过jQuery的after添加元素</button>    <div class="aaron">        <p class="test1">测试before</p>    </div>    <div class="aaron">        <p class="test2">测试after</p>    </div>    <script type="text/javascript">    $("#bt1").on('click', function() {        //在匹配test1元素集合中的每个元素前面插入p元素        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')    })    </script>    <script type="text/javascript">    $("#bt2").on('click', function() {        //在匹配test1元素集合中的每个元素后面插入p元素        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')    })    </script></body>

2、外部插入

(内容).insertAfter(对象)
insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入
(内容). insertBefore(对象)
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>    .test1 {        background: #bbffaa;    }    .test2 {        background: yellow;    }    </style></head><body>    <h2>通过insertBefore与insertAfter添加元素</h2>    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>    <div class="aaron">        <p class="test1">测试insertBefore,不支持多参数</p>    </div>    <div class="aaron">        <p class="test2">测试insertAfter,不支持多参数</p>    </div>    <script type="text/javascript">    $("#bt1").on('click', function() {        //在test1元素前后插入集合中每个匹配的元素        //不支持多参数        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))    })    </script>    <script type="text/javascript">    $("#bt2").on('click', function() {        //在test2元素前后插入集合中每个匹配的元素        //不支持多参数        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))    })    </script></body></html>

阅读全文

0 0