jquery动态添加DOM节点

本文转载自查看原文 2015-10-26 17:10 2062 JavaScript

1、append()方法：向每个匹配的元素内部添加元素

appendTo()方法：将所有匹配的元素追加的指定的元素中

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <title>jquery选择器</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>梨</li>
     </ul>
</body>
<script type="text/javascript">
    var $li1=$("<li>柚子</li>");
    $("ul").append($li1);

    var $li2=$("<li>哈密瓜</li>");
    $li2.appendTo("ul");

</script> </html>

2、prepend()方法：向所有匹配的元素前面添加新的元素

prependTo()方法：将元素添加到指定元素的前面

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <title>jquery选择器</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>梨</li>
     </ul>
</body>
<script type="text/javascript">
    var $p=$("<p>请选择你喜欢的水果</p>");
    $("ul").prepend($p);

    $p.prependTo("ul");
</script>
</html>

3、after()：在每个匹配的元素之后添加元素

insertAfter()：将元素插入到指定元素的后面

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <title>jquery选择器</title>
</head>
<body>
    <p>请选择你喜欢的水果</p>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>梨</li>
     </ul>
</body>
<script type="text/javascript">
    var $b=$("<b>您的选择是</b>");
    $("p").after($b);
   
    $b.insertAfter("p");
</script>
</html>

4、before() 在匹配的元素之前添加元素，效果同prepend()

insertBefore() 将元素添加到指定元素之前，效果同prependTo()

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jQuery – 7.动态创建Dom、删除节点 JQuery 基础：8.动态创建Dom节点 jQuery添加删除DOM元素，选择节点 Dom 动态添加元素节点总结 jquery给动态添加的dom元素绑定事件 Jquery each() 如何操作动态添加的DOM元素 jQuery里面的DOM操作（查找，创建，添加，删除节点） vue，在模块中动态添加dom节点，并监听 DOM节点的插入（jQuery） DOM节点创建（jQuery）