码迷,mamicode.com
首页 > Web开发 > 详细

jquery知识 内部 外部插入元素

时间:2015-06-30 21:49:27      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>    
<script type="text/javascript">
$(function(){
    $(‘#box ul li‘).append(‘<h3>新添加的</h3>‘);//向每个匹配的元素内部追加内容
    $(‘#box ul‘).appendTo(‘div‘);//把所有匹配的元素追加到另一个指定的元素集合中,首先要存在div标签
    $(‘#box ul li‘).prepend(‘<h3>添加到前面</h3>‘);//添加到元素的前面
    $(‘#box ul li‘).prependTo(‘‘);//将所有匹配的元素添加到指定元素集合的最前面
    // after(content)//在每个匹配元素之后插入内容
    // before(content)//在每个匹配元素之前插入内容
    $(‘#box ul li‘).insertAfter(‘ol‘);//将所有匹配的元素插入到另一份指定的元素元素集合的后面,原来的没有了
    $(‘#box ul li‘).insertBefore(‘ol‘);//将所有匹配的元素插入到另一份指定的元素元素集合的前面,原来的没有了
})
</script>
<style type="text/css">
    #box{
        width:500px;
        height: 300px;
        margin:0 auto;
        border:1px solid green;
    }
    div{
        border:1px solid green;
    }
</style>
</head>
<body>
    <div id="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div></div>
    <ol></ol>
</body>
</html>

 

jquery知识 内部 外部插入元素

标签:

原文地址:http://www.cnblogs.com/lzzhuany/p/4611480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!