<!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. ☀【window.self / window.parent / window.top】

    Js中的window.parent ,window.top,window.self 详解 √http://blog.csdn.net/zdwzzu2006/article/details/604763 ...

  2. 负载均衡服务器session共享的解决方案

    在ASP.NET的程序中要使用Session对象时,必须确保页面的@page指令中EnableSessionState属性是True或者Readonly,并且在web.config文件中正确的设置了S ...

  3. Sum It Up

    http://acm.hdu.edu.cn/showproblem.php?pid=1258 Sum It Up Time Limit: 2000/1000 MS (Java/Others)    M ...

  4. json包的loads dumps区分

    符合json格式的字符串    --(json.laods)-->     json(字典形式或是列表形式)    --(json.dumps)-->    符合json格式的字符串

  5. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  6. [POJ1477]Box of Bricks

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19503   Accepted: 7871 Description Litt ...

  7. 【原】Spark中Master源码分析（一）

    Master作为集群的Manager,对于集群的健壮运行发挥着十分重要的作用.下面,我们一起了解一下Master是听从Client(Leader)的号召,如何管理好Worker的吧. 1.家当(静态属 ...

  8. linux驱动程序之电源管理之regulator机制流程 （1）

    电源管理芯片可以为多设备供电,且这些设备电压电流有所同.为这些设备提供的稳压器代码模型即为regulator. 下面通过下面三个过程分析regulartor供电机制: 1.分析regulator结构体 ...

  9. linux和Dos下换行符转换

    一.windows的文件到linux下的转换方法: 1. 用sed命令替换 sed -e 's/^M//g' original.txt > target.txt (注意^M 在Linux/Uni ...

  10. codeforce 621D - Rat Kwesh and Cheese

    题意:求表达式中最大的值. long double 128位 有效数字18-19 范围正负1.2*10^4932 注意取对数! #include<iostream> #include< ...