<!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. 关于Lua 5.1中的debug.hook和coroutine

    1.debug.hook只hook主线程,在coroutine中不起作用. 2.coroutine.resume之后主线程会挂起,直到协程coroutine.yield返回 3. 对于如下代码 deb ...

  2. oracle rac存储安装

    oracle rac 10.2 的在 linux 上的存储选项 博客分类: Oracle OracleLinux项目管理配置管理  Oracle 集群需要存储的软件和数据 项目 内容 最少磁盘空间 C ...

  3. bzoj 1228 [SDOI2009]E&D（sg函数，找规律）

    Description 小E 与小W 进行一项名为“E&D”游戏.游戏的规则如下:桌子上有2n 堆石子,编号为1..2n.其中,为了方便起见,我们将第2k-1 堆与第2k 堆(1 ≤ k ≤ ...

  4. Weblogic 集群部署说明 --转

    代理web.xml 设置 <servlet> l                <servlet-name>HttpClusterServlet</servlet-nam ...

  5. url 编码方法

    这个方法用于把 字符串转换成url 的编码 第一个参数是 字符串,第二个参数是 指定的编码(UTF-8 ,GBK, gbk2312...) private string UrlEncode(strin ...

  6. 注册表-在IE上永久显示我的名字"www.baidu.com - 朱建强"

    HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\新建字符串 名为:window title值为:"朱建强"

  7. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  8. JS自定义事件（Dom3级事件下）

    原文出处:  http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html . 我拿出作者中的一段,感谢作者原创. ...

  9. Ubuntu16.04编译安装php

    #Ubuntu16.04编译安装php Ubuntu16.04上面搭建基于Nginx的php服务.Nginx使用apt直接安装的. sudo apt install nginx php的安装部署步骤主 ...

  10. Camtasia Studio8使用教程

    tip:善于使用ctrl+f搜索目录查看内容 目录 软件的下载与安装 软件的汉化与界面介绍 录制前准备与试机录制 录像机的设置 屏幕画 导入与编辑视频(包括图片,音乐,媒体) 时间线轨道时间轴 标记的 ...