<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文档处理</title>

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

<script type="text/javascript">

$(function(){

    $('#box ul li').append('<h3>新添加的</h3>');//向每个匹配的元素内部追加内容

    $('#box ul').appendTo('div');//把所有匹配的元素追加到另一个指定的元素集合中,首先要存在div标签

    $('#box ul li').prepend('<h3>添加到前面</h3>');//添加到元素的前面

    $('#box ul li').prependTo('');//将所有匹配的元素添加到指定元素集合的最前面

    // after(content)//在每个匹配元素之后插入内容

    // before(content)//在每个匹配元素之前插入内容

    $('#box ul li').insertAfter('ol');//将所有匹配的元素插入到另一份指定的元素元素集合的后面，原来的没有了

    $('#box ul li').insertBefore('ol');//将所有匹配的元素插入到另一份指定的元素元素集合的前面，原来的没有了

})

</script>

<style type="text/css">

    #box{

        width:500px;

        height: 300px;

        margin:0 auto;

        border:1px solid green;

    }

    div{

        border:1px solid green;

    }

</style>

</head>

<body>

    <div id="box">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

        </ul>

    </div>

    <div></div>

    <ol></ol>

</body>

</html>

jquery知识 内部 外部插入元素的更多相关文章

  1. DOM的内部插入和外部插入

    /*****************返回值都是最前面调用这个方法的元素 ***************** */ //这是外部插入 $("div").insertBefore($( ...

  2. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

  3. html 关于内部是float元素的外部div高度为0的解决方法！

    最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...

  4. javascript jquery插入元素后事件会被注销

      js jquery插入元素后事件会被注销 document.body.innerHTML += <div id="dd">test</div>  //这 ...

  5. jQuery 插入元素

    在被选元素的内部 prepend() 方法在被选元素的开头(仍位于内部)插入指定内容. append() 方法在被选元素的结尾(仍然在内部)插入指定内容.

  6. JQuery DOM操作：设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换

    JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...

  7. Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？

    问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下  <d ...

  8. DOM常用外部插入方法与区别

    1.DOM外部插入after()与before() 节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系.之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处 ...

  9. jQuery知识重构

    jQuery知识重构 目录: 一.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery ...

随机推荐

  1. 浏览器中的XML与JavaScript

    浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型 在 ...

  2. C#使用Word中的内置对话框实例

    本文实例讲述了C#使用Word中的内置对话框的方法,分享给大家供大家参考.具体实现方法如下: 使用 Microsoft Office Word 时,有时需要显示用户输入对话框.虽然可以创建自己的对话框 ...

  3. MVC系统过滤器、自定义过滤器

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...

  4. Maven之debug技巧

    mvn eclipse:clean eclipse:eclipse -Dwtpversion=2.0 可以将项目编译为web项目,然后再项目上右键debug as server即可.

  5. 荷兰国旗，三类数字分离 nyoj

    很有用O(n)内实现三类数字分离,以前大多是分成两类数据,快排中分成两类,还有就是"ab***vvvc" 在O(n)中变成 abvvc****,变成两类划分问题   #includ ...

  6. leetcode—pascal triangle

    1.题目描述 Given numRows, generate the first numRows of Pascal's triangle.   For example, given numRows ...

  7. android获取屏幕分辨率

    DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); dm. ...

  8. Storm系列(十七)DRPC介绍

    Storm版本0.9.5 在storm中DRPC服务应用于远程分布式计算,根据客户端提交的请求参数,而返回Storm计算的结果. DRPC服务启动流程(远程模式) 启动DRPC服务,启动命令:stor ...

  9. Linux内核系列设备模型（一） Kobject与Kset

    1.Kobject Kobject是设备驱动模型的核心结构,它使所有设备在底层都有统一的接口.在内核注册的kobject对象都会对应sysfs文件系统中的一个目录(目录名称有Kobject结构中k_n ...

  10. C辗转相除法求最大公约数的实现

    int gcd(int a, int b)//求最大公约数,a为分子,b为分母 { ) return a; return gcd(b,a%b); }