专栏首页Devops专栏jquery 元素节点操作 - 创建节点、插入节点、删除节点

jquery 元素节点操作 - 创建节点、插入节点、删除节点

jquery的节点操作说明

前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

使用html()操作节点

首先编写一个div包含一个a标签,如下:

下面来给这个a的后面加上一个span标签看看,如下:

在这里面可以看到,首先使用$('div').html()得到原来的内部元素字符串,然后再拼接其他brspan元素字符串,再赋值回$('div').html()内,这样就可以根据字符串操作好元素了。

如果能用这种方式操作元素就尽量用这种方式,因为这种方式操作元素的话性能最高。

另外还有其他创建节点、插入节点、删除节点的方法,如下:

var $div2 = $('<div>这是一个div元素</div>');  # 创建节点
append() appendTo() #在现存元素的内部,从后面插入元素
prepend() prependTo() #在现存元素的内部,从前面插入元素
after() insertAfter() #在现存元素的外部,从后面插入元素
before() insertBefore() #在现存元素的外部,从前面插入元素

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点

1、append()和appendTo():在现存元素的内部,从后面插入元素

下面写一个div内部插入元素的示例如下:

        $(function(){
            var $span = $('<span>这是一个span</span>');

            $('div').append($span);
        })

可以看到append的方法就是父元素增加一个子元素节点,而appendTo()则是反过来,是子元素增加到父元素的后面,写法如下:

        $(function(){
            var $span = $('<span>这是一个span</span>');
            $span.appendTo($('div'));
        })

另外,还可以将现有的a剪切到div的最后,操作如下:

那么假设有两个a标签呢?是否会批量直接剪切过来,还是要使用each()方法遍历一遍?

直接就可以整体剪切过来。

2、prepend()和prependTo():在现存元素的内部,从前面插入元素

            // 在前面插入一个p元素
            var $p = $('<p>这是一个p标签</p>');
            $('div').prepend($p);

下面来演示一下prependTo()方法,如下:

            // 在前面插入一个p元素
            var $p = $('<p>这是一个p标签</p>');
            $p.prependTo($('div'));

同样,也可以将已有的元素剪切至最前面。

$('a').prependTo($('div'));

3、after()和insertAfter():在现存元素的外部,从后面插入元素

写一个p标签插入到div的后面,如下:

//在div外部后面加一个p元素
$('div').after($p);
var $p = $('<p>这是一个p标签</p>');
$p.insertAfter($('div'));

4、before()和insertBefore():在现存元素的外部,从前面插入元素

div前面插入一个div #box2的元素。

            // 在div外部的前面加一个#box2 div
            var $div2 = $('<div id="#box2">这是div2元素</div>');
            $('div').before($div2);
            // 在div外部的前面加一个#box2 div
            var $div2 = $('<div id="#box2">这是div2元素</div>');
            $div2.insertBefore($('div'));

删除节点

删除a元素,如下:

// 删除节点
$('a').remove();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • jquery样式操作

    选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

    Devops海洋的渔夫
  • CSS3 E:nth-child、E>F、E~F、E+F以及属性选择器

    2、E:first-child:匹配元素类型为E且是父元素的第一个子元素 3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素 4、E ...

    Devops海洋的渔夫
  • jquery 选中某一行

    Dream城堡
  • css 使元素居中

    <div style="text-align:center;">居中显示</div>

    lin_zone
  • 怎么处理多层Json数据循环遍历的问题?看这里

    今天我们写一个关于处理多层for循环的问题,其实这个严格来说不是多层循环的问题,他的本质其实是对Json数据格式的处理,很多时候啊我们的数据格式是这样的

    何处锦绣不灰堆
  • 选择器与css的一些用法

    天天_哥
  • html5打开摄像头

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta content="text/html...

    李海彬
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • CSS旋转魔方

     想不想做一个3D魔方,把儿子的照片放进去,外面是你,里面是他。本人从业至今,自诩是动画机器人,苦心钻研各种动画,精通CSS3、Canvas等,不管你要做什么,...

    我不是费圆

扫码关注云+社区

领取腾讯云代金券