利用Jquery实现动态增加、修改html元素

在jq中实现动态增加、修改元素有六种方法可以使用。

append 插入在当前元素内、最后一个子节点后面
prepend 插入到当前元素内、第一个子节点前面
after 在元素后面追加，同级 m.after(n); 在m后面追加n
before 在元素的前面追加，同级 m.before(n) 在m前面追加n
insertAfter 在元素后面追加，同级 m.insertAfter(n) 在n后面追加m 、把m插在n后面

insertBefore 在元素的前面追加，同级 m.insertBefore(n) 在n前面追加m、把m插在n前面

例如、如下html代码为前提

<div id="nameDiv"><input type="text" id="name" name="name" placeholder="名称" /><br/><br/><input type="text" id="sex" name="sex" placeholder="性别" /><br/><br/></div><br/><label>--------div分割--------</label><br/><br/><div id="classDiv"><input type="text" id="class" name="class" placeholder="班级" /><br/><br/><input type="text" id="phone" name="phone" placeholder="手机" /><br/><br/></div><br/><br/><input type="button" id="add" name="add" value="追加" οnclick="add()"/>

append 、prepend

function add() {var addHtml = '<br/><br/><input type="text" id="code" name="code" placeholder="学号" /><br/><br/>';$("#nameDiv").append(addHtml);$("#classDiv").prepend(addHtml);}

结果：

insertAfter、insertBefore的参数应该是html中已存在的元素

 function add() {$("#nameDiv").insertAfter($("#classDiv"));}

利用Jquery实现动态增加、修改html元素相关推荐

html怎样实现动态背景效果,利用jQuery实现动态背景特效
特效描述:利用jQuery实现动态背景特效.利用jQuery实现动态背景特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Example 1 ooh, pretty. Notic ...
前端笔记1（选择器，动态增添/修改页面元素）
demo1:修改页面元素全选反选,并计算总价 <!DOCTYPE html> <html lang="en" dir="ltr">&l ...
利用jQuery来动态为属性添加或者删除属性
现在做的项目有这样一个需要: 先看图吧^^ 要求: 1.当点击导出Excel方式的时候,如果是"勾选导出"或"不分页导出"时,下面的文本框不能修改 2.当点击& ...
js动态添加修改删除元素
事件委托:e.target 核心:1.通过事件冒泡给子元素添加事件,控制新生成的元素进行操作 2.减少DOM元素操作,只需要绑定一个父元素就可以,不用循环遍历每一个子元素进行绑定事件操作,提高程序性能 ...
javascript/jquery给动态加载的元素添加click事件
/** 这种写法:在重新加载数据后事件依然有效*/$(document).on('click', '#district_layer ul li', function () { }); 转载于:http ...
利用jquery实现数字千分位排版显示，使用0动态补全8位数
利用jquery实现上述效果其实非常简单,首先在html部分创建div容器,设置好最外层对齐方式以及大小.再利用jquery对动态数据进行html拼接就可以了. 内容块定义 <div style ...
php修改js内容,js怎样修改html元素的内容？HTML DOM实现修改内容
js怎样修改html元素的内容?本章就给大家介绍在js中利用HTML DOM是怎样修改html元素内容的.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要了解HTML DO ...
利用jQuery实现表单里的增加、删除和修改
这周老师教了怎么利用jQuery实现在表单里增加.删除和修改数据.可以增加数据,单选删除.多选删除和全选删除.ISBN的值式唯一的,不能重复,当输入的ISBN已存在,就只修改后面书名.效果图如下: 整 ...
利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...
jquery追加html后删除,jquery动态增加删除元素节点
jquery动态增加删除元素节点对于语言编程,不同的思路有着不同的解决办法,Jquery对于动态的ul-li节点的增加删除实力操作思路: 1.做一个按钮用于增加li节点,使用Jquery:appen ...

利用Jquery实现动态增加、修改html元素

利用Jquery实现动态增加、修改html元素相关推荐

最新文章

热门文章