<!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. 【t009】最大矩形面积

    Time Limit: 2 second Memory Limit: 32 MB [问题描述] 在x轴上水平放置着N个矩形,每个矩形都有相同的宽度,但是它们的高度并不相同. 比如,图1包含的矩形的高分 ...

  2. Oracle null 处理

    null first null last 解决啦-

  3. 一起学Python：tcp服务器

    tcp服务器 生活中的电话机 如果想让别人能更够打通咱们的电话获取相应服务的话,需要做以下几件事情: 买个手机 插上手机卡 设计手机为正常接听状态(即能够响铃) 静静的等着别人拨打 tcp服务器 如同 ...

  4. php实现 合并表记录（需求是最好的老师）

    php实现 合并表记录(需求是最好的老师) 一.总结 一句话总结:php数组,桶. 1.fgets的作用? 读取一行 0 1 2.如何读取一行中的两个数? fgets()读取一行后explode以空格 ...

  5. java 线程排查问题流程

    1. 通过top命令查看当前系统CPU使用情况,定位CPU使用率超过100%的进程ID:2. 通过ps aux | grep PID命令进一步确定具体的线程信息:3. 通过ps -mp pid -o ...

  6. 三种方式使得iOS应用能够在后台进行数据更新和下载

    三种方式使得iOS程序即使在关闭或崩溃的情况下也能够在后台持续进行一些任务,比如更新程序界面快照,下载文件等.这三个方法分别是 Background Fetch,Remote Notification ...

  7. erlang的Socket参数含义

    http://blog.csdn.net/pkutao/article/details/8572216 {ok, Listen} = gen_tcp:listen(?defPort, [binary, ...

  8. Service熟人

    Service 为一体的四个分量间(剩余有Activity ,内容提供商,广播),它属于后台工作,能够在后台很长一段时间执行,他没有接口. 首先从使用方式上来说来说 他有两种使用方式: 1.启动式使用 ...

  9. 数据竞赛利器 —— xgboost 学习清单

    1. 入门大全 xgboost 作者给出的一份完备的使用 xgboost 进行数据分析的完整示例代码:A walk through python example for UCI Mushroom da ...

  10. SQL Server 存储过程之嵌套游标

    下面是一个订单取消的含2个游标的存储过程 set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go ALTER PROCEDURE [dbo].[CancelOrde ...