一、创建节点
　　为了使页面更加智能化，有时我们想动态的在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 提供了其他几个方法来插入节点。

　　

<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>

　　

<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/10/11 jquery创建和插入节点

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

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

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

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

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

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

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

  7. c#操作xml的代码(插入节点、修改节点、删除节点等)

    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> ...

随机推荐

  1. jQuery实现按enter键登录

    <script> $(document).keydown(function (event) { if (event.keyCode == 13) { $("#btn_Login& ...

  2. hdu 2037 今年暑假不AC

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  3. kzalloc 函数详解(转载)

    用kzalloc申请内存的时候, 效果等同于先是用 kmalloc() 申请空间 , 然后用 memset() 来初始化 ,所有申请的元素都被初始化为 0. view plain /** * kzal ...

  4. cache与MMU与总线仲裁

    为了以合理的价格,设计容量和速度满足计算机系统的需求,计算机体系结构设计者设计出了存储器的层次结构. "Cache-主存"和"主存-辅存"是最常见的两种层次结构 ...

  5. Oracle中的日期加减

    加法   select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate ...

  6. 【实践】js实现随机不重复抽取数组中元素

    经过3个星期的时间终于用做完了学校的练习作品了,但是发现在用jq 做互动虽然很方便但却带来了不少的烦恼 所以在以后的日子里我要好好学 js 了! 然后呢在博主之前学java 里面 另我最头痛的就是做产 ...

  7. PhpStorm提高效率的使用方法及设置

    快捷键: CTRL + D  复制当前行到下一行 或 复制选中内容到选中内容之后 CTRL + Y  删除当前行或选中内容所涉及的行 CTRL + R  替换 CTRL + F  查找 ALT + 上 ...

  8. UITableView heightForHeaderInSection遇到的坑

    出现这种现象只需要把 heightforfoot改为0.01 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSectio ...

  9. Java 基础练习题2

    按要求编写Java程序: (1)编写一个接口:InterfaceA,只含有一个方法int method(int n): (2)编写一个类:ClassA来实现接口InterfaceA,实现int met ...

  10. sql中文日期格式转换（xxxx年x月x日）

    ) set @dd='2014年10月1日' select replace(replace( replace(@dd,'日',''),'月','-'),'年','-') 别人的方法 )='2012年1 ...