<!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. IIS7配置https

    To Install an SSL Certificate in Microsoft IIS 7 Click Start, mouse-over Administrative Tools, and t ...

  2. GUN/GPL 中文译文

    版权所有 (C) 1989,1991 Free Software Foundation, Inc. 59 Temple Place, Suite 330, Boston, MA 02111-1307U ...

  3. selenium-ide学习

    最近想把selenium给系统的学习下.主要因为它开源,且适配多个浏览器多种语言. selenium主要由selenium-ide.selenium1.selenium2.selenium guird ...

  4. 【HTML】Advanced4：Accessible Links

    1.Tab <ul> <li><a href="here.html" tabindex="1">Here</a> ...

  5. 洛谷P1238 走迷宫

    洛谷1238 走迷宫 题目描述 有一个m*n格的迷宫(表示有m行.n列),其中有可走的也有不可走的,如果用1表示可以走,0表示不可以走,文件读入这m*n个数据和起始点.结束点(起始点和结束点都是用两个 ...

  6. Docker系列(四)Dockerfile

    基本语法 使用 #来注释 FROM 指令告诉Docker使用哪个镜像作为基础 接着是维护者信息 RUN 开头的指令会在创建中运行,比如安装软件包 FROM 格式: FROM<image>或 ...

  7. HW3.23

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  8. HDOJ-ACM1011(JAVA)

    转载声明:原文转自:http://www.cnblogs.com/xiezie/p/5569721.html 搞懂题意之后,个人感觉,这道题题目的描述相当的费解~ 做这道题目,个人感觉,涉及到树的遍历 ...

  9. ehcache简单使用

    项目中需要实现一个功能,定时查询FTP服务器某个目录下的文件,并及时下载至本机,同时不能消耗太多系统资源. 最后实现是使用ehcache,将文件路径和文件大小缓存,如果前后两次无变化,则忽略.如果同一 ...

  10. hdoj 1237 简单计算器

    简单计算器 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...