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

最后更新时间：2023-09-30 13:40:58

ajax

在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代码为前提

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

```javascript
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"));
        }
```