jquery知识内部外部插入元素

最新推荐文章于 2024-09-14 18:52:56 发布

dianmei3204

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lzzhuany/p/4611480.html

版权

<!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>

转载于:https://www.cnblogs.com/lzzhuany/p/4611480.html