zoukankan      html  css  js  c++  java
  • JQ 添加节点和插入节点的方法总结

    转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345

    添加节点的jQuery方法: append()、prepend()、appendTo() 、prependTo()

    插入节点的jquery方法: after() 、before() 、insertBefore() 、insertAfter()

    举个例子来说明以上几种方法的用法:

    html例子:

    <nav>

    <ul>

    <li>序列号1</li>

    <li>序列号2</li>

    <li>序列号3</li>

    </ul>

    </nav>

    添加节点

    1、append()方法:

    script:

    var $div = '<div>append添加的节点</div>';

    $('nav').append($div); //将新创建的div节点插入到nav容器的内容底部

    html:

    <nav>

    <ul>

    <li>序列号1</li>

    <li>序列号2</li>

    <li>序列号3</li>

    </ul>

    <div>append添加的节点</div>

    </nav>

    2、prepend()方法:

    script:

    var $div = '<div>append添加的节点</div>';

    $('nav').append($div); //将新创建的div节点插入到nav容器的内容顶部

    html:

    <nav>

    <div>prepend添加的节点</div>

    <ul>

    <li>序列号1</li>

    <li>序列号2</li>

    <li>序列号3</li>

    </ul>

    </nav>

    3、appendTo()方法:

    script:

    var $div = '<div>append添加的节点</div>';

    var nav = $('nav'); //$div.appendTo($nav); //这样写是错误的 $('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容后面

    html:

    <nav>

    <ul>

    <li>序列号1</li>

    <li>序列号2</li>

    <li>序列号3</li>

    </ul>

    <div>appendTo添加的节点</div>

    </nav>

    4、prependTo()方法:

    script:

    var $div = '<div>append添加的节点</div>';

    var nav = $('nav'); //$div.prependTo($nav); //和前面同理,这样写是错误的 $('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。 将新创建的节点添加到nav的内容的前面

    html:

    <nav>

    <div>prependTo添加的节点</div>

    <ul>

    <li>序列号1</li>

    <li>序列号2</li>

    <li>序列号3</li>

    </ul>

    </nav>

    插入节点

    5、after()方法:

    script:

    var $l_1 = $('ul>li:nth-of-type(1));

    var $l_2 = $('ul>li:nth-of-type(2));

    var nav = $('nav'); $l_2.after($l_1); //这里可以这么理解,第2个li后面跟着第1个li。

    html:

    <nav>

    <ul>

    <li>序列号2</li>

    <li>序列号1</li>

    <li>序列号3</li>

    </ul>

    </nav>

    6、before()方法:

    script:

    var $l_1 = $('ul>li:nth-of-type(1));

    var $l_2 = $('ul>li:nth-of-type(2));

    var nav = $('nav'); $l_1.before($l_2); //这里可以这么理解,第1个li前面是第2个li。

    html:

    <nav>

    <ul>

    <li>序列号2</li>

    <li>序列号1</li>

    <li>序列号3</li>

    </ul>

    </nav>

    7、insertBefore()方法:

    script:

    var $l_1 = $('ul>li:nth-of-type(1));

    var $l_2 = $('ul>li:nth-of-type(2));

    var nav = $('nav'); $l_2.insertBefore($l_1); //将第2个li插入到第1个li前面

    html:

    <nav>

    <ul>

    <li>序列号2</li>

    <li>序列号1</li>

    <li>序列号3</li>

    </ul>

    </nav>

    8、insertAfter()方法:

    script:

    var $l_1 = $('ul>li:nth-of-type(1));

    var $l_2 = $('ul>li:nth-of-type(2));

    var nav = $('nav'); $l_1.insertAfter($l_2); //将第1个li插入到第2个li后面

    html:

    <nav>

    <ul>

    <li>序列号2</li>

    <li>序列号1</li>

    <li>序列号3</li>

    </ul>

    </nav>

    容易出现问题的地方在 appendTo()和preappendTo()。

  • 相关阅读:
    原生ajax书写
    java 中的instanceof
    Leetcode-Python3
    快速读入挂
    HDU 6044 Limited Permutation(2017多校)【计数 快速读入挂 线性逆元】
    HDU 6015 Colorful Tree(2017多校)
    HDU 6034 【贪心】
    POJ 3415 Common Substrings 【长度不小于 K 的公共子串的个数】
    POJ Football Game 【NIMK博弈 && Bash 博弈】
    2018
  • 原文地址:https://www.cnblogs.com/quxiajun/p/6478128.html
Copyright © 2011-2022 走看看