<!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. isIOS9

    function isIOS9() { //获取固件版本 var getOsv = function () { var reg = /OS ((\d+_?){2,3})\s/; if (navigat ...

  2. ☀【jQuery 优化】jQuery基础教程（第3版）

    jQuery代码优化:选择符篇 √ http://www.ituring.com.cn/article/377 jQuery代码优化:遍历篇 √ http://www.ituring.com.cn/a ...

  3. js正则表达式及代码

    //校验是否全由数字组成function isDigit(s){var patrn=/^[0-9]{1,20}$/;if (!patrn.exec(s)) return falsereturn tru ...

  4. Android 再按一次退出程序

    实现代码: private long exitTime = 0; /** * 捕捉返回事件按钮 * * 因为此 Activity 继承 TabActivity 用 onKeyDown 无响应,所以改用 ...

  5. 使用Spring MVC 的表单控制器SimpleFormController

    以注册过程为例,我们可能会选择继承AbstractController来实现表单的显示,继承AbstractCommandController来实现表单的处理 ,这样是可行的,但必须要维护两个控制器 ...

  6. Fixing ssh login long delay

    原文:http://injustfiveminutes.com/2013/03/13/fixing-ssh-login-long-delay/ For a long time I had a prob ...

  7. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程06：技能播放的逻辑关系》

    6.技能播放的逻辑关系 技能播放概述: 当完成对技能输入与检测之后,程序就该对输入在缓存器中的按键操作与程序读取的技能表信息进行匹配,根据匹配结果播放相应的连招技能. 技能播放原理: 按键缓存器中内容 ...

  8. NULL指针 Void* 和野指针

    在C和C++的语言中常常有这几个概念: NULL指针.空指针.Void *指针.野指针(Wild Pointer)甚至垂悬指针(Dangling Pointer). 1.NULL指针,一般用于指向一个 ...

  9. Android基于XMPP Smack Openfire下学习开发IM(五)连接断开重连

    学习过程中大家都碰到过连接被断开的问题给困扰吧,下面教大家如何做到连接断开后,重新连接 首先要创建连接监听器,用来监听连接状态,这里我写了一个类 继承了ConnectionListener,重写了里面 ...

  10. PHP留言板（实例）

    lyb.htm <div class="lymain"> <script language="JavaScript"> function ...