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

一、方法

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>

(0)

相关推荐

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

    一.方法 wrap :把所有匹配的元素,用其他元素的结构化包裹起来 wrapAll : 把所有匹配的元素,用单个元素包裹起来 wrapInner : 把匹配元素的子类用html结构包裹起来 二.实例 (1)wrap 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <

  • jQuery实现在最后一个元素之前插入新元素的方法

    本文实例讲述了jQuery实现在最后一个元素之前插入新元素的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js"> </script> <script type="text/javascript"> $(function () { $(&

  • python实现数组插入新元素的方法

    本文实例讲述了python实现数组插入新元素的方法.分享给大家供大家参考.具体如下: li=['a', 'b'] li.insert(0,"c") 输出为:['c', 'a', 'b'] li=['a', 'b'] li.insert(-1,"c") 输出为:[ 'a','c', 'b'] 希望本文所述对大家的Python程序设计有所帮助.

  • python 把文件中的每一行以数组的元素放入数组中的方法

    有时候需要把文件中的数据放入到数组中,这里提供了一种方法,可以根据文件结尾的标记进行数据拆分,然后再把拆分的文件放入数组中 # -*-coding: utf-8 -*- f = open("username.txt","w") f.write("Lycoridiata\n") f.write("wulei\n") f.write("leilei\n") f.write("Xingyu\n"

  • JS动态插入脚本和插入引用外部链接脚本的方法

    在日常开发中,经常遇到 js 动态插入脚本 . 什么是 js 动态插入脚本 ? 指的是在页面加载时不存在,但将来的某一时刻通过修改该 DOM 动态添加的脚本.和操作 HTML 元素一样. js 动态插入脚本也有两种方式:插入 JavaScript 代码和插入外部文件. 一.直接插入 javascript 代码 <script type="text/javascript"> function sayHi() { alert("hi"); } </sc

  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibli

  • 使用python list 查找所有匹配元素的位置实例

    如下所示: import re word = "test" s = "test abcdas test 1234 testcase testsuite" w = [m.start() for m in re.finditer(word, s)] print(w) 以上这篇使用python list 查找所有匹配元素的位置实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Jquery元素追加和删除的实现方法

    介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法. 2.HTML-DOM 在使用Javascript和DO

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • jQuery动态创建元素以及追加节点的实现方法

    我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子

随机推荐