加入元素：

.append()——在目标元素之后加入元素。

.prepend()——在目标元素之前加入元素。

.after()——在目标元素之后换行加入元素；

.before()——在目标元素之前加入元素。并使目标元素换行；

删除元素：

.remove()——删除目标元素；

.empty()——清空目标元素内的子元素；

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>加入元素&删除元素</title>

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

    <script src="js/addEle.js"></script>

    <style>

        .divStyle{

            width:300px;

            height:25px;

            background: #01C5FF;

        }

    </style>

</head>

<body>

<button id="btn">加入元素</button>

<div class="divStyle">

    <p>恒大今年的亚冠之路会顺利吗？</p>

</div>

<button id="btn2">删除元素</button>

</body>

</html>
$(document).ready(function(){

    /*加入元素*/

    $("#btn").on("click",function(){

        /**

         *html方法,jQuery方法,Dom方法

         */

        var ele1="<p>come on</p>";

        var ele2=$("<p></p>").text("let's do it");

        var ele3=document.createElement("p");

        ele3.innerHTML="dance your body";

        $("body").append(ele1,ele2,ele3);

    });

    /*删除元素*/

    $("#btn2").on("click",function(){

        //$("div").remove();

        $("div").empty();

    });

});

jQuery的DOM操作之加入元素和删除元素的更多相关文章

  1. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  2. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  3. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  4. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  5. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  6. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  7. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  8. Jquery所有Dom操作汇总

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

随机推荐

  1. 从K近邻算法、距离度量谈到KD树、SIFT+BBF算法

    转载自:http://blog.csdn.net/v_july_v/article/details/8203674/ 从K近邻算法.距离度量谈到KD树.SIFT+BBF算法 前言 前两日,在微博上说: ...

  2. 3.6 Lucene基本检索+关键词高亮+分页

    3.2节我们已经运行了一个Lucene实现检索的小程序,这一节我们将以这个小程序为例,讲一下Lucene检索的基本步骤,同时介绍关键词高亮显示和分页返回结果这两个有用的技巧. 一.Lucene检索的基 ...

  3. bzoj 4407 于神之怒加强版 （反演+线性筛）

    于神之怒加强版 Time Limit: 80 Sec  Memory Limit: 512 MBSubmit: 1184  Solved: 535[Submit][Status][Discuss] D ...

  4. bzoj4897 [Thu Summer Camp2016]成绩单

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4897 [题解] 第一次看这题想的是f[l,r]的区间dp发现仅记录这两个好像不能转移啊 会出 ...

  5. win7 iis 7.0 碰到 503错误，找到的解决方案

    Service Unavailable HTTP Error 503. The service is unavailable. 今天要布署一个网站,在自己的电脑上,结果碰到服务器503错误,找应用程序 ...

  6. 各版本Sql Server下载地址全

    SQL Server 2014简体中文企业版 文件名:cn_sql_server_2014_enterprise_edition 32位下载地址:ed2k://|file|cn_sql_server_ ...

  7. 【原创】Linux环境下的图形系统和AMD R600显卡编程(11)——R600指令集

    1 低级着色语言tgsi OpenGL程序使用GLSL语言对可编程图形处理器进行编程,GLSL语言(以下高级着色语言就是指GLSL)是语法类似C的高级语言,在GLSL规范中,GLSL语言被先翻译成教低 ...

  8. hdu 5720(贪心+区间合并)

    Wool Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Subm ...

  9. J.U.C并发框架源码阅读（十二）ConcurrentHashMap

    基于版本jdk1.7.0_80 java.util.concurrent.ConcurrentHashMap 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. Us ...

  10. C++之++运算符重载问题

    记录++之前先记一下左右值和存取数据的问题 数据的存放分三个部分,堆区,栈区和静态变量区 左值可以更改,右值不能更改 栈区和堆区存储的都是左值,可以随意更改其值,静态变量区部分数据是右值,比如cons ...