关于JQuery中的appendTo方法

最新推荐文章于 2024-02-24 20:11:30 发布

依夜知秋

最新推荐文章于 2024-02-24 20:11:30 发布

阅读量895

点赞数 1

分类专栏： JQuery 文章标签： JQuery JS

本文链接：https://blog.csdn.net/qq_39309971/article/details/80304591

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery中的appendTo方法是会改变页面原有的结构，包括原从页面中取到结构的地方，比如如下代码（代码来自慕课网）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 150px;
    }

    .left div {
        width: 150px;
        height: 120px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>add方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
            <p>新的p元素</p>
        </div>
    </div>
    <div class="right"></div>
    <br/>
    <button>点击：add传递元素标签</button>
    <button>点击：add传递html结构</button>
    <script type="text/javascript">
    $("button:first").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    })
    </script>
</body>
</html>

该代码使用了appendTo()方法：

$('li').add('<p>新的p元素</p>').appendTo($('.right')

将取到的的所有li元素放到right类下的结构里，结果是，原来含有的p元素的结构里，p元素全部不见了，全部都移到right类下的结构里了，如图：
执行代码前：
这里写图片描述
执行代码后：

因此appendTo改变了整个HTML文件的结构。

依夜知秋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JQuery中的appendTo方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JQuery中的appendTo方法是会改变页面原有的结构，包括原从页面中取到结构的地方，比如如下代码（代码来自慕课网）：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-type&quot
复制链接

扫一扫

专栏目录