<!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. 【社交分享SDK】ShareSDK for Android 2.5.9已经公布

    ShareSDK for Android 2.5.9已经公布 版本号:V2.5.9  2015-3-19 1.升级Dropbox对API接口的调用.包含授权.获取用户信息,分享三个接口 2.升级Kak ...

  2. Html Vedio标签全屏

    http://ask.csdn.net/questions/221701 http://www.zhangxinxu.com/wordpress/2010/03/every-browser-suppo ...

  3. Java8学习之旅2---基于Lambda的JDBC编程

    Java8的Lambda表达式确实是一个很好的特性.可是在哪些场合下使用.事实上还是须要细致考虑的.我们当然不能为了使用而使用,而是须要找到切实实用的场合.在JDBC编程中,比如查询语句,首先须要进行 ...

  4. SEO那些事：一句代码一键分享网站

    这是很久以前就已经写过的笔记了,有一个习惯,每次遇到一个问题,都会进行百度,然后把解决问题的关键点记录下来,有人问我,为什么更新频率如此之快,大部分都是从前积累的知识点. 其实每天工作所涉及的知识点都 ...

  5. 【BZOJ 1020】 [SHOI2008]安全的航线flight

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1020 [题意] [题解] 二分+判断点是否在多边形区域内+计算点到直线的最短距离 对于 ...

  6. pycharm输出乱码如\xe9\x9d\x92\xe8\x9b\x99\xe7\x8e\x8b\xe5\xad\x90转成中文

    转自:https://blog.csdn.net/baidu_19473529/article/details/54949453 利用Python解决unicode编码问题,有些json在控制台打印也 ...

  7. Android经常使用UI包裹 - EditText

    EditText的信息接受用户输入是最重要的Android UI包裹,您可以使用EditText.getText()获取它的文本内容. 实例:EditTextDemo 执行效果: watermark/ ...

  8. oc面试攻略

    原文出自:http://mobile.51cto.com/iphone-402619.htm 1.Object-C有多继承吗?没有的话用什么代替?cocoa 中所有的类都是NSObject 的子类 多 ...

  9. delphi之IOCP学习（一）

    困扰已久的网络通信(IOCP:完成端口),今天终于揭开她的神秘面纱了,之前百度N久还是未能理解IOCP,网络上好多博文都没有贴出源码,初学者很难正在理解IOCP并自己写出通信例子 ,经过努力,今天自己 ...

  10. WPF的逻辑树与视觉树(3)Visual呈现

    原文:WPF的逻辑树与视觉树(3)Visual呈现 这篇就点到为止,挑重点讲 绘图方式有两种 1.继承UIElement,重写OnRender方法 public partial class Windo ...