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. 使用99元一年的256MB高性能阿里云Redis加速Discuz论坛

    介绍 Discuz是一个常见的论坛,支持使用Redis来对论坛进行加速访问,对于访问量比较大的论坛能够取到很好的作用,本文介绍如何使用阿里云高性价比256MBRedis来加速该论坛. 阿里云Redis ...

  2. Tomcat、Apache、IIS这三种Web服务器来讲述3种搭建JSP运行环境的方法

    一.相关软件介绍 1. J2SDK:Java2的软件开发工具,是Java应用程序的基础.JSP是基于Java技术的,所以配置JSP环境之前必须要安装J2SDK. 2. Apache服务器:Apache ...

  3. linux centos7最小化安装桥接模式网络设置、xshell、xftf

    一.网络连接设置1.桥接模式 使用电脑真实网卡,可以和自己的电脑连接,也可以和外部网络连接2.NAT模式 使用wmware network adapter vmnet8虚拟网卡,可以和自己的电脑连接, ...

  4. Windows 安装mkvirtualenv虚拟python环境

    pip install virtualenvwrapper-win mkvirtualenv --python=python.exe 新python虚拟环境名称 使用方法 所有的命令可使用:virtu ...

  5. 通过代码管理工具 git 完成一次完整的代码管理过程

    1.从公共远程fork一份自己的本地远程之后,从本地远程 clone 到本地 2.将本地代码跟公共远程代码做关联配置 git remote add upstream https://github.co ...

  6. SQL Server 索引知识-结构,实现

    索引的作用毋庸置疑,但他是如何组织,并实现提高语句访问效率的呢?本篇文章为大家做个详细的介绍. 聚集索引架构 B-tree 如图1-1 a.B-tree的结构,叶子节点为数据.数据按照聚集索引键有序排 ...

  7. innodb crash

    今天上午同事处理了一个innodb crash 的问题,没有备份,如何恢复? 查看日志: 180928 8:42:44 InnoDB: Error: page 163855 log sequence ...

  8. RHEL7系统管理之内核管理

    1. Kdump工具 Kdump的工作机制是在内核崩溃时, 通过kexec 工具由BIOS启动一个备用内核, 由备用内核执行一系列任务,保存内存中崩溃内核的状态, 供后续故障分析用. 本文默认AMD或 ...

  9. 解决NSTextContainer分页时文本截断问题

    解决NSTextContainer分页时文本截断问题 NSTextContainer与NSLayoutManager配合使用可以将大文本文件分页,但是,分页过程中会遇到问题,显示字符被截断的问题:) ...

  10. idea指定SpringBoot启动.properties文件

    比如我的项目下有2个.properties文件,一个是application.properties,一个是application-local.properties,在本地的时候想指定用applicat ...