<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('#btnAppend').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').append(b);
            });
            $('#btnAppendTo').click(function () {
                $('<b>zhh</b>').appendTo($('#dv'));
            });

            $('#btnPrepend').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').prepend(b);
            });

            $('#btnPrependTo').click(function () {
                $('<b>zhh</b>').prependTo($('#dv'));
            });

            $('#btnAfter').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').after(b);
            });

            $('#btnInsertAfter').click(function () {
                $('<b>zhh</b>').insertAfter($('#dv'));
            });

            $('#btnBefore').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').before(b);
            });

            $('#btnInsertBefore').click(function () {
                $('<b>zhh</b>').insertBefore($('#dv'));
            });

            $('#btnEmpty').click(function () {
                $('#dv').empty();
            });

        });
    </script>
</head>
<body>
    <input type="button" name="name" value="Append "  id="btnAppend"/>
    <input type="button" name="name" value="AppendTo "  id="btnAppendTo"/>
    <input type="button" name="name" value="Prepend "  id="btnPrepend"/>
    <input type="button" name="name" value="PrependTo "  id="btnPrependTo"/>
     <input type="button" name="name" value="After "  id="btnAfter"/>
    <input type="button" name="name" value="InsertAfter "  id="btnInsertAfter"/>
    <input type="button" name="name" value="before "  id="btnBefore"/>
    <input type="button" name="name" value="InsertBefore "  id="Button1"/>
    <input type="button" name="name" value="Empty "  id="Button2"/>

    <div id="dv">
      Hello world
    </div>
</body>
</html>

jquery动态操作元素的更多相关文章

  1. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  2. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  3. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  4. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  5. Jquery动态操作checkbox

    问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...

  6. jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示

    刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. jquery 动态 新增 元素 绑定事件

    在jquery1.7以前使用live方法进行绑定,由于年代久远,这里就不介绍了. 在jquery1.7以后我们使用的on方法,这里需要注意的一点就是:如果想让动态生成的元素,都绑上事件,on前面的选择 ...

  8. JQuery动态操作表格

    新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

  9. jquery动态改变元素内容

    ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)

随机推荐

  1. css3背景透明文字不透明

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...

  2. 【30.49%】【codeforces 569A】Music

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  3. c++ 成员函数指针

    C++中,成员指针是最为复杂的语法结构.但在事件驱动和多线程应用中被广泛用于调用回叫函数.在多线程应用中,每个线程都通过指向成员函数的指针来调用该函数.在这样的应用中,如果不用成员指针,编程是非常困难 ...

  4. js进阶正则表达式8量词（+*？{}的意义用法）（量词的对象是前面一个字符）

    js进阶正则表达式8量词(+*?{}的意义用法)(量词的对象是前面一个字符) 一.总结 1.量词的对象是前面一个字符 量词 描述 n+ 匹配任何包含至少一个 n 的字符串. n* 匹配任何包含零个或多 ...

  5. 全栈JavaScript之路（ 二十五 ）訪问元素的样式

    不论什么支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之相应. 这个style 对象是 CSSStyleDeclaration类型的实例,包括着html sty ...

  6. 第三十一天 慵懒的投射在JDBC上的暖阳 —Hibernate的使用（四）

    6月19日,小雨."黄梅时节家家雨.青草池塘处处蛙.有约不来过夜半,闲敲棋子落灯花." 面向对象无限包容的个性,给对SQL和数据库一窍不通的澳大利亚人Gavin King创造了极大 ...

  7. JQuery通过radio，select改变隐藏显示div

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_36092584/article/details/52740681 1)select下拉框控制d ...

  8. 机房重构所遇问题&quot;未能载入文件或程序集“DAL”或它的某一个依赖项。系统找不到指定的文件&quot;的解决的方法集锦

    敲七层登录的时候.忽然间认为敲三层搞清的思路瞬间又凌乱了.花了一天的时间边敲边梳理,最终整完了,执行的时候弹出了这种错误:未能载入文件或程序集"DAL"或它的某一个依赖项. 系统找 ...

  9. 【t059】序列

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 生活中,大多数事物都是有序的,因为顺序的美是最令人陶醉的.所以现在RCDH看了不顺的东西就头痛.所以他 ...

  10. Tower与DevCloud对比分析报告

    1. 产品介绍 Tower是彩程设计公司出品的远程办公和团队协作工具,为小企业和小团队提供简单.靠谱的在线协作服务. DevCloud是集华为研发实践.前沿研发理念.先进研发工具为一体的研发云平台.D ...