jquery 添加节点的几种方法介绍

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery插入,复制、替换和删除节点</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>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>

赞 (0)

相关推荐

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • jquery 删除节点 添加节点 找兄弟节点的简单实现

    $().empty(); //该方法会删除当前节点下的所有子节点,请注意当前节点不会 被删除 $().remove(); //该方法会删除当前节点下的所有子节点,请注意 当前节点会  被删除 $().append('<a>something</a>')  //该方法在当前节点的末尾 添加 这个a标签 $().after('<span style="font-family: Arial, Helvetica, sans-serif;"><a>

  • JQuery给元素添加/删除节点比如select

    jQuery获取Select选择的Text和Value: 复制代码 代码如下: var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value var checkIndex=jQuery("#se

  • jQuery:节点(插入,复制,替换,删除)操作

    复制代码 代码如下: <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q

  • Jquery动态添加及删除页面节点元素示例代码

    通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

  • jquery 添加节点的几种方法介绍

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js"&g

  • jQuery绑定事件的四种方式介绍

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

  • js和jquery判断数据类型的4种方法总结

    1.typeof typeof是一个运算符,有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算. 此方法的返回结果只要以下几种: Number.String.undefined.Bollean.Object.Function 弊端在于如果数据类型为引用数据类型,他只能返回 Object console.log(typeof 1); //number console.log(typeof true); //bollean console.lo

  • Python在图片中添加文字的两种方法

    Python在图片中添加文字的两种方法

    本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.OpenCV中并没有使用自定义字体文件的函数,这不仅意味着我们不能使用自己的字体,而且意味着他无法显示中文字符.这还是非常要命的事情.而且他显示出来的文字位置也不太好控制.比如下面的代码,他想做的仅仅是显示数字3: 代码: #coding=utf-8 import cv2 import numpy as

  • JS Input里添加小图标的两种方法

    我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一 将小图标当做input的背景来插入,直接上代码吧: <style type="text/css"> *{ margin: 0; padding: 0; } input{ border: none; } .box{ height: 50px; background: yellow; } .box input{ width: 200px; height: 30px; border

  • Java编程求二叉树的镜像两种方法介绍

    Java编程求二叉树的镜像两种方法介绍

    给出一棵二叉树,求它的镜像,如下图:右边是二叉树是左边二叉树的镜像. 仔细分析这两棵树的特点,看看能不能总结出求镜像的步骤.这两棵树的根节点相同,但他们的左右两个子节点交换了位置.因此我们不妨先在树中交换根节点的两个子节点,就得到了下面一幅图中的第二颗树 解法1(递归) 思路1:如果当前节点为空,返回,否则交换该节点的左右节点,递归的对其左右节点进行交换处理. /*class TreeNode{ int val; TreeNode left=null; TreeNode right=null;

  • Java 在PDF中添加条形码的两种方法

    条形码,是由宽度不等的多个黑条和空白所组成,用以表达一组信息的图形标识符.通过给文档添加条形码,可以直观,快捷地访问和分享一些重要的信息.本文就将通过使用Java程序来演示如何在PDF文档中添加Codebar.Code128A和Code39条形码.除此之外,还可支持创建Code11.Code128B.Code32.Code39 Extended .Code93和Code93 Extended条形码. 使用工具:Free Spire.PDF for Java(免费版) Jar文件获取及导入: 方法

  • c# 向MySQL添加数据的两种方法

    下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连接字符串,然后执行Open操作打开数据库,在正确打开数据库之后我们才能进行相关的动作,在ExecuteSQL这个函数中, 我们执行MySqlCommand myCmd = new MySqlCommand(CmdString, conn),从而创建MySqlCommand对象,其中传入的两个参数分别

  • C#实现PDF签名时添加时间戳的2种方法(附VB.NET代码)

    C#实现PDF签名时添加时间戳的2种方法(附VB.NET代码)

    在PDF添加签名时,支持添加可信时间戳来保证文档的法律效应.本文,将通过C#程序代码介绍如何添加可信时间戳,可通过2种方法来实现.文中附上VB.NET代码,有需可供参考. 一.程序运行环境 编译环境:Visual Studio/.NetFramework 4.8 所需测试文件:PDF..pfx数字证书及秘钥.PDF类库(spire.pdf.dll 7.5.7) 可信时间戳服务器:URL地址 注:VS程序中,在"解决方案资源管理器中"先引用spire.pdf.dll文件,如下图, 这里可

  • Android 拍照后返回缩略图的两种方法介绍

    Android 拍照后返回缩略图的两种方法介绍

    目录 前言: 一.这就是第一种方法,比较简单,不用将图片保存到手机本地存储下来. 二.第二种方法 总结 前言: 如果简单地拍照片并非您应用的主要目标,那么您可能希望从相机应用中获取图片并对该图片执行一些操作. 一.这就是第一种方法,比较简单,不用将图片保存到手机本地存储下来. 下面我们看具体代码: 1.首先是布局文件activity_photothumbnail.xml <?xml version="1.0" encoding="utf-8"?> <

随机推荐