JQuery_DOM 节点操作之创建节点、插入节点

时间：2021-10-10 22:04:07

一、创建节点
　　为了使页面更加智能化，有时我们想动态的在html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     var box = $('<div id="box">节点</div>'); //创建一个节点
     $('body').append(box); //将节点插入到<body>元素内部
});
</script>
</head>
<body>

</body>

二、插入节点
　　在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。

　　JQuery_DOM 节点操作之创建节点、插入节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     var box = $('<div id="box">增加节点</div>'); //创建一个节点
     $('div').append(box); //将节点插入到<div>元素内部的内容‘节点’后面
});
</script>
</head>
<body>
    <div>节点</div>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     $('div').append(function (index, html) { //使用匿名函数插入节点，html 是原节点
        return '<div>节点</div>';
    });
});
</script>
</head>
<body>
    <div>节点</div>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     $("strong").appendTo("div");//将strong这个标签包括内容添加到div节点内部
     //$('strong').appendTo($('div')); //同上
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    //$('div').prepend('<span>节点</span>'); //将span 插入到div 内部的前面
    //$('div').append(function (index, html) { //使用匿名函数，同上 html是原来div里面的内容
        //return '<span>'+index+html+'节点</span>';
    //});
    //$('strong').prependTo('div'); //将strong 移入div 内部的前面
    $('strong').prependTo($('div')); //同上
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <div>节点</div>
</body>

　　JQuery_DOM 节点操作之创建节点、插入节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    //$('div').after('<span>节点</span>'); //向div 的同级节点后面插入span
    //$('div').after(function (index, html) { //使用匿名函数，同上
        //return '<span>节点</span>';
    //});
    //$('div').before('<span>节点</span>'); //向div 的同级节点前面插入span
    //$('div').before(function (index, html) { //使用匿名函数，同上
        //return '<span>节点</span>';
    //});
    //$('strong').insertAfter('div'); //将strong 元素移到div 元素外部的后面
    $('strong').insertBefore('div'); //将strong 元素移到div 元素外部的前面
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <div>节点</div>
</body>

JQuery_DOM 节点操作之创建节点、插入节点的更多相关文章

  1. javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  2. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  3. js进阶 11-9&sol;10&sol;11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  4. JavaScript---Dom树详解&comma;节点查找方式&lpar;直接&lpar;id&comma;class&comma;tag&rpar;&comma;间接&lpar;父子&comma;兄弟&rpar;&rpar;&comma;节点操作&lpar;增删改查&comma;赋值节点&comma;替换节点&comma;&rpar;&comma;节点属性操作&lpar;增删改查&rpar;&comma;节点文本的操作&lpar;增删改查&rpar;&comma;事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  5. jQuery 节点操作（创建 插入 删除 复制 替换 包裹）

    一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...

  6. C&num;中操作xml文件（插入节点、修改、删除）

    已知有一个xml文件(bookstore.xml)如下: <?xml version="1.0" encoding="gb2312"?> <b ...

  7. c&num;操作xml的代码&lpar;插入节点、修改节点、删除节点等&rpar;

    bookstore.xml文件内容: 复制代码代码示例: <?xml version="1.0" encoding="gb2312"?><bo ...

  8. WPF对于xml的简单操作（下下）插入节点并排序

    正如T所说,下下,这个方法不堪入目,￣□￣|| 贴上再说 //先搞个struct声明 private struct datastruct { public string x; public strin ...

  9. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div&gt ...

随机推荐

  1. Java反射机制学习与研究

    Java反射机制:可以获取正在运行时的Java对象. 1.判断运行时对象对象所属的类. 2.判断运行时对象所具有的成员变量和方法. 3.还可以调用到private方法,改变private变量的值. S ...

  2. poj 2251

    http://poj.org/problem?id=2251 一道简单的BFS,只不过是二维数组,变三维数组,也就在原来基础上加了两个方向. 题意就是从S走到E,#不能走. #include < ...

  3. Java设计模式之认识阶段

    设计模式是什么? 设计模式(Design pattern)是一套被重复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 其本质就是继承与接口的组合应用. 为什么要用设计模? 使用设计模式是为了 ...

  4. mysql 左连接 右连接 内链接

    一般所说的左连接,右连接是指左外连接,右外连接.做个简单的测试你看吧.先说左外连接和右外连接:[TEST1@orcl#16-12月-11] SQL>select * from t1;ID NAM ...

  5. Python初学——多线程Threading

    接着上篇继续跟着沫凡小哥学Python啦 1.1 什么是多线程 Threading 多线程可简单理解为同时执行多个任务. 多进程和多线程都可以执行多个任务,线程是进程的一部分.线程的特点是线程之间可以 ...

  6. 浅析nodeJS中的Crypto模块，包括hash算法，HMAC算法，加密算法知识，SSL协议

    node.js的crypto在0.8版本,这个模块的主要功能是加密解密. node利用 OpenSSL库(https://www.openssl.org/source/)来实现它的加密技术, 这是因为 ...

  7. Aliyun上Linux服务器挂载数据盘及速度测试

    原始文档来自于阿里云官方文档:  Linux 系统挂载数据盘 铁锚 于 2013年12月19日 根据自己的需要进行整理 操作系统: CentOS 6.3, 平台  : 阿里云 ECS 云服务器 1. ...

  8. TCP-IP详解学习笔记1

    TCP-IP详解学习笔记1 网关可以在互不相关的网络之间提供翻译功能: 体系结构: 协议和物理实现,实际上是一组设计决策. TCP/IP协议族允许计算机,智能手机,嵌入式设备之间通信: TCP/IP是 ...

  9. android架构原理

    应用层(与用户打交道) 应用架构层(常用的组件和服务) 系统运行层(Android运行环境+原生c/c++库) Linux核心层(linux内核+硬件抽象层)

  10. 008-Centos 7&period;x安装 Ambari 2&period;2&period;2 &plus; HDP 2&period;4&period;2 搭建Hadoop集群

    1.安装环境说明 安装前先安装好 Centos 7.2, jdk-8u91, mysql5.7.13 一共有3台机器,一个是主节点192.168.111.10,两个是从:192.168.111.11, ...

相关文章