Dom操作

移动或者插入标签的方法

1、append()和appendTo()：在现存元素的内部，从后面放入元素； 先声明一个变量用来保存新标签 
var $span = $('这是一个span元素');

然后用append函数将新元素加入到模块中 $('#div1').append($span);

 

2、prepend()和prependTo()：在现存元素的内部，从前面放入元素

3、after()和insertAfter()：在现存元素的外部，从后面放入元素

4、before()和insertBefore()：在现存元素的外部，从前面放入元素

删除标签

$('#div1').remove();

实例代码

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{background:pink;}

    </style>

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

    <script type="text/javascript">

        $(function(){

            //$('div').html( $('div').html() + '<p>我是JS生成的标签</p>')

            //自定义标签生成成功。    名字：节点

            var $p = $('<p>我是JS生成的标签</p>');

            //在div的内部最后去追加一条数据

            //$('div').append($p);

            //在div的内部最前去追加一条数据

            //$('div').prepend($p);

            //在div的外部之前去追加一条数据

            //$('div').before($p)

            //在div的外部之后去追加一条数据

            $('div').after($p);

            //删除标签。斩草除根,标签都直接删除

            $('ul li').eq(1).remove();

        })

    </script>

</head>

<body>

    <div>

        <p>我是原有的p标签</p>

    </div>

    <ul>

        <li>1111</li>

        <li>2222</li>

        <li>333</li>

    </ul>

</body>

Dom操作（标签--增、删、移动）的更多相关文章

  1. DOM操作标签、事件绑定、jQuery框架/类库

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...

  2. DOM操作标签，事件绑定，jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  3. 超详细的DOM操作（增删改查）

    操作DOM的核心就是增删改查 原文地址:https://jianshu.com/p/b0aa846f4dcc 目录 一.节点创建型API 1.1 createElement 1.2 createTex ...

  4. php5.4以上 mysqli 实例操作mysql 增,删,改,查

    <?php //php5.4以上 mysqli 实例操作mysql header("Content-type:text/html;charset=utf8"); $conn ...

  5. C# ADO.NET (sql语句连接方式)(增,删,改)

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  6. Day048--jQuery自定义动画和DOM操作

    内容回顾 BOM location.reload() 全局刷新页面 location.href location.hash location.pathname location.hostname lo ...

  7. jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  8. DOM树的增查改删总结

    DOM树的增查改删总结 摘要:对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一 ...

  9. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

随机推荐

  1. 百度网盘下载器 PanDownload v2.0

    PanDownload是一款坚持以用户体验为中心,畅快淋漓的下载为理念而打造的下载工具. 从2017年2月9日首个版本推出,时至今日已经一年七个月了,首先感谢大家一直以来的支持与建议,促使着我不断地对 ...

  2. 如何在微软Windows平台上打造出你的Linux开发环境(转载)

    如何在微软Windows平台上打造出你的Linux开发环境 投递人 itwriter 发布于 2013-12-10 11:18 评论(1) 有348人阅读  原文链接  [收藏]  « » 英文原文: ...

  3. 国内一元钱 正常搭建android开发环境

    如果你人在gfw之外,那么此篇文章对你来说毫无用处,请自动略过.. 笔者自android出来之后,就一直想尝试一下.可惜,几年来一直未能够定下身心来研究尝试.而所做的工作也与android没有关系,所 ...

  4. Jmeter入门--关联

    名称解释 关联是请求与请求之间存在数据依赖关系,需要从上一个请求获取下一个请求需要回传回去的数据. 具体方法 Jmeter关联有两种方法:Xpath.正则表达式 方法一:Xpath主要用于响应是格式是 ...

  5. PHP-7的FPM服务的启动

    1.PHP 7的FPM服务位置:/ect/init.d/php7.0-fpm 2.启动:sudo service php7.0-fpm reload

  6. 一、Vim编辑器 二、用户和组管理 三、软件的安装（jdk,mysql） 四、Shell编程

    一.Vim编辑器的使用 1. vim编辑器的运行模式 编辑模式:等待用户编辑命令的输入 插入模式:编辑文本内容 命令模式:执行命令 2. 使用 :vim 文件名 3. 查看当前vim编辑器介绍:vim ...

  7. MapReduce实例&YARN框架

    MapReduce实例&YARN框架 一个wordcount程序 统计一个相当大的数据文件中,每个单词出现的个数. 一.分析map和reduce的工作 map: 切分单词 遍历单词数据输出 r ...

  8. QT 登录记住密码方法之一：Qt QSettings读写配置文件

    不过本文写的是明文保存,最好还是加密一下,以防文件被非法读取 /**登录初始化的时候处理这部分操作*/ Settings cfg("user.ini",QSettings::Ini ...

  9. QT里使用Gsoap调用WebService

    错误了很多天,今天终于搞定,并得到了服务器的结果.这里把错误的原因记录下来. 首先是这里,之前一直没有加载进来,所以一直报错 SOURCES += main.cpp\ gsoap/soapClient ...

  10. HTML5的新标签-整体布局

    过去:<div class="header"> <div class="hgroup"> <h1>....</h1&g ...