jquery知识 内部 外部插入元素

<!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>
时间: 2024-08-07 17:01:44

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

jQuery DOM节点的插入

<div>A</div> var B=$("<p></p>"); append:在A内部末尾插入元素B(A.append(B)); appendTo:将B插入A内部末尾(B.appendTo(A)); prepend:在A内部前面插入元素B(A.prepend(B)); prependTo:将B插入A内部前面(B.prependTo(A)); after:在A外部末尾插入B(A.after(B)); before:在A外部前面插入B(A.

jquery内部插入与外部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>文档处理</title> <script src="jquery-3.4.1.js"></script></head

DOM—外部插入.after()、.before()、.insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo()

外部插入.after()..before()..insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo() 1   .after(content)在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 2   .before(content)据参数设定,在匹配元素的前面插入内容 3   .after()和.before()共同点 都是用来对相对选中元素外部增加相邻的兄弟节点 都可以接收HTML字符串.DOM元素.元素数组,或者J

js jquery插入元素后事件会被注销

  js jquery插入元素后事件会被注销 document.body.innerHTML += <div id="dd">test</div>  //这个会注销事件 $(document.body).append(str);//使用这个 也可以绑定事件. 例子: //快捷键双击 $(".app_shortcut_item").dblclick(function () { var id = $(this).attr("id&quo

如何利用jquery在任意指定li元素后面插入新的li元素

如何利用jquery在任意指定li元素后面插入新的li元素:本章节介绍要一下如何利用jquery实现将一个新的li元素插入到任意li元素的后面.原生的javascript可以使用insertBefore()函数,具体可以参阅javascript的insertBefore.insertAfter和appendChild简单介绍一章节.下面介绍一下如何利用jquery实现此功能.代码实例: <!DOCTYPE html><html><head> <meta chars

jQuery DOM操作-查询、创建、插入元素

DOM操作分类: DOM Core-处理任何一种使用标记语言编写出来的文档. DOM HTML-提供简明的记号来描述HTML元素及属性. DOM CSS-针对CSS的操作,主要用于获取和设置style对象的各种属性. 初始页面代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYP

jQuery添加插入元素技巧:

jQuery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加 里面的前面添加使用 prepend和prependTo 里面的后面添加使用 append  或appendTo 外面添加使用(after和before) 外面添加又分为在外面的前面添加和后面添加 外面的前面添加使用 before或insertBefore 外面的后面添加使用 after或insertAfter

jquery DOM 创建、插入、删除

1.创建元素节点: $("<div></div>") 2.创建文本节点,与创建元素节点类似,可以直接把文本内容一并描述 $("<div>我是文本节点</div>") 3.创建属性节点:与创建元素节点同样的方式 $("<div id='test' class='aaron'>我是文本节点</div>") $("<div class='right'><

(转)jQuery知识总结

jQuery知识总结 jQuery一直都在用,但都是在用时查查手册,并没有系统的学过,最近组内做jQuery交流,花了几天时间系统了学习了下,做了个PPT,本文是根据PPT总结而来,有些地方做了些补充.希望对jQuery初学者有些帮助. jQuery简介 简介 jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多). jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布,吸引了来自世界各地的众多ja