jquery 添加节点的几种方法

jquery 添加节点的几种方法,第1张

<titlejQuery插入,复制、替换和删除节点</title

<script type="text/javascript" src="jquery-1.3.2.js"</script

<script type="text/javascript"

$(document).ready(function(){//几种添加节点的方法//$("p").append("<b你好吗?</b")//向p元素中追加《b》//$("<b你好吗?</b").appendTo("p")//将《b》追加到p元素中//$("p").prepend("<b你好吗?</b")//向p中前置《b》//$("<b你好吗?</b").prependTo("p")//将《b》前置到p元素中//$("p").after("<b你好吗?</b")//向p元素后插入《b》//$("<b你好吗?</b").insertAfter("p")//将《b》插入到p元素后边//$("p").before("<b你好吗?</b")//在p元素之前添加《b》//$("<b你好吗?</b").insertBefore("p")//将《b》插入到p元素前面//几种删除节点的方法//var $li=$("ul li:eq(1)").remove()//删除ul节点中第2个元素节点//$("ul").append($li)//把刚删除的元素节点从新添加到ul元素中去//$("ul li").remove("li[title!=菠萝]")//将ul元素下title属性不等于"菠萝"的li元素删除//$("ul li:eq(1)").empty()//清空ul节点下第2个li元素的内容//复制节点/*$("ul li").click(function(){

$(this).clone(true).appendTo("ul")//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件})*///替换节点//$("p").replaceWith("<strong你最不喜欢的水果是?</Strong")})</script</head<body<p你好!</p

你最喜欢的水果是?<ul<li title="苹果"苹果</li

动态创建Dom节点

jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中。

例如:

var

link

=

$("<a

href='http://www.baidu.com'>百度</a>")

$("div:first").append(link)

添加节点元素的方法:

Append方法用来在元素的末尾追加元素(最后一个子节点)

Prepend在元素的开始添加元素(第一个子节点)

After:在元素之后添加元素(添加兄弟节点)

Before:在元素之前添加元素(添加兄弟节点)

子元素.appendTo(父元素):在元素的末尾追加一个子元素

子元素.prependTo(父元素):在元素的开始追加一个子元素

A.insertBefore(B)

将A插入到B的前面,等同于B.before(A)

X.insertAfter(B)

将X插入到Y的后面,等同于Y.after(X)

删除节点:

Empty():清空该元素下的所有子节点

等同于:while(ele.firstChild){ele.removeChild(ele.firstChild)}

Remove(selectot)自杀;删除当前元素,返回值为被删除的元素,可以讲节点删除之后放到其他节点下面,有一个移动的效果,例如:

var

lis

=

$("#ulSite

li").remove()

$("#ulSite2").append(lis)

Clone()克隆节点,支复制节点,不复制节点

Clone(true):克隆节点带事件

节点的替换:

$("br").replaceWith("<hr/>")

$("br").replaceAll("<hr/>")

包裹节点

Wrap()方法用来将所有的元素逐个用指定的标签包裹

$("b").wrap("<font

color='red'></font>")将所有粗体字红色显示

wrapInner()在内部围绕


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11724696.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存