在每个匹配元素的外部插入新元素的方法

Javascript教程 2025-08-10

一、方法

wrap :把所有匹配的元素,用其他元素的结构化包裹起来

wrapAll : 把所有匹配的元素,用单个元素包裹起来

wrapInner : 把匹配元素的子类用html结构包裹起来

二、实例

(1)wrap

复制代码代码如下:

< !DOCTYPE html >

< html >

< head >

< meta charset="UTF-8" >

< title >Insert title here< /title >

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

< script type="text/javascript" >

$(function() {

$("div a").wrap("< div id='id' >< /div >");

});

< /script >

< /head >

< body >

< div >

< a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a >

< /div >

< /body >

< /html >

firebug显示结果:

复制代码代码如下:

< !DOCTYPE html >

< html >

< head >

< meta charset="UTF-8" >

< title >Insert title here< /title >

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

< script type="text/javascript" >

< /head >

< body >

< div >

< div id="id" >

< a >liuxingyu< /a >

< /div >

< div id="id" >

< a >liuxingyu< /a >

< /div >

< div id="id" >

< a >liuxingyu< /a >

< /div >

< div id="id" >

< a >liuxingyu< /a >

< /div >

< /div >

< /body >

< /html >

(2)wrapAll

复制代码代码如下:

< !DOCTYPE html >

< html >

< head >

< meta charset="UTF-8" >

< title >Insert title here< /title >

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

< script type="text/javascript" >

$(function() {

$("div a").wrapAll("< div id='id' >< /div >");

});

< /script >

< /head >

< body >

< div >

< a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a >

< /div >

< /body >

< /html >

firebug显示结果:

复制代码代码如下:

< !DOCTYPE html >

< html >

< head >

< meta charset="UTF-8" >

< title >Insert title here< /title >

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

< script type="text/javascript" >

$(function() {

$("div a").wrapAll("< div id='id' >< /div >");

});

< /script >

< /head >

< body >

< div >

< div id="id" >

< a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a >

< /div >

< /div >

< /body >

< /html >

(3)wrapInner

复制代码代码如下:

< !DOCTYPE html >

< html >

< head >

< meta charset="UTF-8" >

< title >Insert title here< /title >

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

< script type="text/javascript" >

$(function() {

$("div").wrapInner("< div id='id' >< /div >");

});

< /script >

< /head >

< body >

< div >

< a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a >

< /div >

< /body >

< /html >

firebug显示结果:

复制代码代码如下:

< !DOCTYPE html >

< html >

< head >

< meta charset="UTF-8" >

< title >Insert title here< /title >

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

< script type="text/javascript" >

$(function() {

$("div").wrapInner("< div id='id' >< /div >");

});

< /script >

< /head >

< body >

< div >

< div id="id" >

< a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a > < a >liuxingyu< /a >

< /div >

< /div >

< /body >

< /html >