#转载请留言联系

如果需要了解什么是HTML的dom，可以参考：http://www.w3school.com.cn/htmldom/index.asp

下面的是jQuery操作DOM，并不是JavaScript。

  • 创建新标签

var new_content = $('<h1>我是标题</h1>');  //$函数中如果参数不是一个选择器语法，则会被认为是一个新增的元素

  • 在现存元素的内部，从后面放入元素

1.append

示例（在标题1下面添加标题2）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            var new_content=$('<h1>我是标题2</h1>');

            $('body').append(new_content)  //注意这里

        })

    </script>

</head>

<body>

    <h1>我是标题1</h1>

</body>

</html>

2.appendTo

示例（在标题1下面添加标题2）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            var new_content=$('<h1>我是标题2</h1>');

            new_content.appendTo($('body'))  //注意这里

        })

    </script>

</head>

<body>

    <h1>我是标题1</h1>

</body>

</html>

需要注意的是：append与appendTo方法的使用，位置是不同的！

  • 在现存元素的内部，从前面放入元素

prepend()与prependTo()，用法和append()与appendTo()一样。只是一个在前面放入，一个在后面放入。

  • 在现存元素的外部，从后面放入元素

1.after

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            var new_content=$('<h1>我是标题2</h1>')

            $('h1').after(new_content)

        })

    </script>

</head>

<body>

    <h1>我是标题1</h1>

</body>

</html>

2.insertAfter

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            var new_content=$('<h1>我是标题2</h1>')

            new_content.insertAfter($('h1'))

        })

    </script>

</head>

<body>

    <h1>我是标题1</h1>

</body>

</html>

  • 在现存元素的外部，从前面放入元素

before()和insertBefore()

  • 删除节点

$('#list li').eq(2).remove(); // 移除下标2

  • 清空内容

$('#list').empty();

jQuery简单操作HTML的DOM的更多相关文章

  1. 关于jquery简单操作简单表格

    最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现 ...

  2. jQuery简单介绍及基本用法(选择器&DOM操作)

    简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...

  3. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1)：格式化数字字符串 小程序开发之图片转Base64（C#、.Net） jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  4. jQuery属性操作之DOM属性操作

    DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...

  5. Jquery操作的是内存数据，H5 dataset操作的是dom属性

    Jquery操作的是内存数据,H5操作的是dom属性

  6. 函数，递归以及dom简单操作

    函数 函数概述 函数就是具备某个功能的一个工具.是完成某个功能的一段代码. 系统提供了很多函数,但是并不能包含所有的功能,所以有些功能需要我们自己来写----自定义函数.函数定义好以后,就可以像系统函 ...

  7. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  8. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  9. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

随机推荐

  1. app图标

    1.http://www.iconfont.cn/ 在里面可以搜索你想要的图标: 比如关闭. 2.选择一个好看的下载png 3.打开ps,ctrl n新建一个图层. 把你下载的png弄到上面,然后关闭 ...

  2. oracle（sql）基础篇系列（二）——多表连接查询、子查询、视图

    多表连接查询 内连接(inner join) 目的:将多张表中能通过链接谓词或者链接运算符连接起来的数据查询出来. 等值连接(join...on(...=...)) --选出雇员的名字和雇员所在的部门 ...

  3. laravel5.5探究容器的秘密

    目录 1. 定义一个契约(接口) 2. 一个实现这个接口的类 3. 创建服务提供者 4. 注册服务提供者 5. 创建facades 6. 再然后需要到配置文件config/app.php中注册门面类别 ...

  4. ICG-智能代码生成器.(权限控制.融入平台).(表单引擎).(最低兼容IE8)

    请下拉滚动条... 代码生成器.附带客户端代码 个人平台:www.10086bank.com 界面: 1--首先是server制作界面(BS结构).直接上图:   2--点击提交生成一下文件: 各个代 ...

  5. java 继承小结

    [code=java] //多态的经典例子 //向上转型后,父类只能调用子类和父类的共同方法和的重写方法(方法名相同,参数也相同),不能调用重载方法(方法名相同,但参数不同) class A { pu ...

  6. JNDI和JDBC的区别和联系及其使用方法

    一.JNDI 和JDBC的区别和联系 两者都是API,是连接数据库的标准.并不是什么产品或方法. 二.JDBC 全称:Java Database Connectivity 以一种统一的方式来对各种各样 ...

  7. （原）Unreal渲染模块 源码和实例分析说明

    @author:白袍小道 说明 1.由于小道就三境武夫而已,而UE渲染部分不仅管理挺大,而且牵扯技术和内容驳杂,所以才有这篇梳理. 2.尽量会按书籍和资料,源码,小模块的调试和搬山(就是敲键盘)..等 ...

  8. springboot09 事务 H2数据库

    一.事务 1. 事务介绍 事务可以包含多个操作步骤 , 如果有一个步骤失败,那么这一组都以失败告终. 事务是指包含多个微小逻辑单元的一组操作, 只要其中有一个逻辑失败了,那么这一组操作就全部以失败告终 ...

  9. iptables的配置文件/etc/sysconfig/iptables不存在 linux防火墙开关命令

    某linux服务器,使用 cat /etc/sysconfig/iptables命令时, 找不到文件. 1. service iptables status 使用该命令检查状态 如果之前找不到配置文件 ...

  10. Flex学习笔记

    Flex —— Flexible Box 弹性布局 用来为盒子模型提供灵活性 /* 块级元素 */ .box{ display: flex; } /* 行内元素 */ .box{ display: i ...