jquery 元素节点操作

2023-03-14 23:22| 来源: 网络整理| 查看: 265

jquery的节点操作说明

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

使用html()操作节点

首先编写一个div包含一个a标签，如下：

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

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

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

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

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

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

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

$(function(){ var $span = $('这是一个span'); $('div').append($span); })

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

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

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

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

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

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

// 在前面插入一个p元素 var $p = $('

这是一个p标签

'); $('div').prepend($p);

下面来演示一下prependTo()方法，如下：

// 在前面插入一个p元素 var $p = $('

这是一个p标签

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

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

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

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

写一个p标签插入到div的后面，如下：

//在div外部后面加一个p元素 $('div').after($p);var $p = $('

这是一个p标签

'); $p.insertAfter($('div'));

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

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

// 在div外部的前面加一个#box2 div var $div2 = $('这是div2元素'); $('div').before($div2); // 在div外部的前面加一个#box2 div var $div2 = $('这是div2元素'); $div2.insertBefore($('div'));删除节点

删除a元素，如下：

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

【本文地址】

公司简介

联系我们