JQuery在页面中添加和除移DOM示例代码

1.before（）:将新节点添加到前面

2.after（）:将节点添加到低部

3.prepend（）:把节点变成第一个节点

4.append（）:把新节点添加到末端,与appendTo（）效果相同，只是语法上有差异

5.remove()：除移节点

示例：


代码如下:

<ul>
<li class="vacation">
<h2>Hawaiian Vac</h2>
<button>Get Price</button>
</li>
</ul>

实现：


代码如下:

<script type="text/javascript">
$(document).ready(function () {
$('.vacation').before(price); //将新节点添加到前面
$('.vacation').after(price);//将节点添加到低部
$('.vacation').prepend(price); //把节点变成<li>的第一个节
var price = $('<p>From $399.99</p>'); //在JQuery中创建一个dom
//$('.vacation').append(price); //把新节点添加到末端,等于price.appendTo($('.vacation'));，语法不同
price.appendTo($('.vacation'));//把新节点添加到末端
$('button').remove(); //除移节点
});
</script>

赞 (0)

相关推荐

  • JQuery在页面中添加和除移DOM示例代码

    1.before():将新节点添加到前面 2.after():将节点添加到低部 3.prepend():把节点变成第一个节点 4.append():把新节点添加到末端,与appendTo()效果相同,只是语法上有差异 5.remove():除移节点 示例: 复制代码 代码如下: <ul> <li class="vacation"> <h2>Hawaiian Vac</h2> <button>Get Price</butt

  • VUE页面中加载外部HTML的示例代码

    VUE页面中加载外部HTML的示例代码

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的. 所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果. 不同以往的IFRAME标签,那种方式比较Low,另外有其他的一些BUG. 本文思路是把HTML请求以来,以v-html的形式加载到页面内部.注册全局组件[v-html-panel] 1.HtmlPanel.vue文件 <template> <div> <mu-circular-progress :

  • iOS中添加文本链接和图片示例代码

    iOS中添加文本链接和图片示例代码

    前言 我们在开发过程中会遇到这样的需求.用户注册,或者做些其他操作的时候我们需要在下方加上这样一段话:注册代表你遵守我们的<用户协议>,<隐私条款>这两个是链接,那么接下来我们改怎么做呢,下面来一起看看详细的介绍: 先上图再说话 实现方法 如果我们按照平常的想法在label上面显示文字,然后给label加上手势也可以实现,那么链接多的话,你就要判断点击手势的区域,感觉麻烦,那么苹果给我们提供了很好的方法富文本NSMutableAttributedString. UITextView

  • VBScript教程 第二课在HTML页面中添加VBscript代码

    VB教程 > 第二课在HTML页面中添加VBscript代码 SCRIPT 元素用于将 VBScript 代码添加到 HTML 页面中. <SCRIPT> 标记 VBScript 代码写在成对的 <SCRIPT> 标记之间.例如,以下代码为一个测试传递日期的过程: <SCRIPT LANGUAGE="VBScript"> <!--Function CanDeliver(Dt)CanDeliver = (CDate(Dt) - Now())

  • 用jQuery向div中添加Html文本内容的简单实现

    前台代码: <link href="http://www.jb51.net/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://www.jb51.net/Scripts/jquery-1.4.4.min.js" type="text/javascript">

  • JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁的代码实现,就不要写的那么复杂,看也看不懂.先码着,为后面的项目做做准备. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <met

  • 在页面中输出当前客户端时间javascript实例代码

    时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • SpringBoot中默认缓存实现方案的示例代码

    在上一节中,我带大家学习了在Spring Boot中对缓存的实现方案,尤其是结合Spring Cache的注解的实现方案,接下来在本章节中,我带大家通过代码来实现. 一. Spring Boot实现默认缓存 1. 创建web项目 我们按照之前的经验,创建一个web程序,并将之改造成Spring Boot项目,具体过程略. 2. 添加依赖包 <dependency> <groupId>org.springframework.boot</groupId> <artif

随机推荐