我们知道js中有三种动态创建元素的方法，jQuery中也可以动态的创建元素
var str = $("&a href='http://www.jb51.net'&就爱阅读&/a&");
$("ul").append(str); //将动态创建的str元素追加到ul下面
在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素，位置)，在jQuery中是
append 追加在父元素的最后一个子节点后面
prepend插入到父元素的第一个子节点前面
after在元素后面追加，同级
befor在元素的前面追加，同级
下面的代码可以很好的演示追加节点
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
width: 200
height: 100
&script src="jquery-1.12.2.js"&&/script&
$(function () {
//注意：如果传进来的jQuery对象是页面中存在的元素，它会这个对象剪切，
// 所以我们会发现点击后，最下面的p标签被剪切了
var p1 = $("p");
$("#btn1").click(function () {
$("div").append(p1);
$("#btn2").click(function () {
$("div").prepend(p1);
$("#btn3").click(function () {
$("div").after(p1);
$("#btn4").click(function () {
$("div").before(p1);
&input type="button" id="btn1" value="btnAppend"/&
&input type="button" id="btn2" value="btnPrepend"/&
&input type="button" id="btn3" value="btnAfter"/&
&input type="button" id="btn4" value="btnBefore"/&
&div&div标签1&/div&
&p&我要插队。。。&/p&
以上就是小编为大家带来的jQuery动态创建元素以及追加节点的实现方法全部内容了，希望大家多多支持就爱阅读~
欢迎转载：
推荐： 　　　
<img src="//logos.gif" width="146" height="120" alt="比较方便的onMouseWheel缩放图片效果 原创"/>比较方便的onMouseWheel缩放图片效果 原创原生js实现给指定元素的后面追加内容
原生js实现给指定元素的后面追加内容
　　复制代码 代码如下:　　var header1 = document.getElementById("header"); var p = document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法 function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentN // 找到指定元素的父节点 if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法 parent.appendChild( newElement, targetElement ); }else{ parent.insertBefore( newElement, targetElement.nextSibling ); }; };
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
职称考试题目
招生信息考研政治
网络安全安全设置工具使用手机安全
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&1361人阅读
JavaScript（26）
转载链接：
原生js实现给指定元素的后面追加内容
var header1 = document.getElementById(&header&);
var p = document.createElement(&p&); // 创建一个元素节点
insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置
var parent = targetElement.parentN // 找到指定元素的父节点
if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
parent.appendChild( newElement, targetElement );
parent.insertBefore( newElement, targetElement.nextSibling );
自测实例：
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
&ul id=&fusu&&
&li&好雨知时节，&/li&
&li&当春乃发生。&/li&
&li&&span class=&c-gap-right-small&&随风潜入夜&/span&,&/li&
&li&润物细无声。&/li&
&script language=&javascript&&
var objUl = document.getElementById(&fusu&);
var objLen = objUl.children.
var lastObj = objUl.children[objLen-1];
//alert(lastObj.innerHTML);
var p = document.createElement(&ol&); // 创建一个元素节点
p.innerHTML = &#39;&li&万物生&/li&&li&荷塘月色&/li&&#39;;
insertAfter(p,lastObj); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置
var parent = targetElement.parentN // 找到指定元素的父节点
if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
parent.appendChild( newElement, targetElement );
parent.insertBefore( newElement, targetElement.nextSibling );
运行结果：
好雨知时节， 当春乃发生。 随风潜入夜， 润物细无声。
万物生荷塘月色
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：136122次
积分：1720
积分：1720
排名：第17805名
原创：15篇
转载：139篇
(1)(1)(2)(2)(2)(5)(1)(2)(1)(1)(5)(1)(4)(4)(2)(9)(4)(7)(5)(5)(14)(8)(15)(13)(6)(11)(19)(3)}