jquery创建添加append、prepend、appendTo、prependTo、after、insertAfter、before、insertBefore

​​

全栈工程师开发手册 （作者：栾鹏）

​​jquery系列教程2-DOM操作全解 ​​

jquery创建添加元素

jquery支持直接使用h5代码作为参数创建元素，将元素添加到dom树中append、prepend、appendTo、prependTo、after、insertAfter、before、insertBefore等方法，具体功能如代码中注释。

代码如下：

$cr = $("<label></label>");                 //使用h5代码创建元素
$("#div1").append($cr);                   //添加创建好的元素

//创建文本节点
$cr = $("<label>这里就是文本</label>");           //在元素中加上文本就是创建文本节点，更准确的说法应该是创建元素节点和文本节点
$("#div1").append($cr);                   //创建好的元素

//创建属性节点
$cr = $("<label title='mytitle'>这里就是文本</label>");   //创建包含title属性的label元素
$("#div1").append($cr);                   //append表示在父元素内部结尾追加元素
$("#div1").prepend($cr);                  //prepend表示在父元素内部首部添加元素
$cr.appendTo($("#div1"));                   //appendTo表示子元素追加到父元素内部结尾
$cr.prependTo($("#div1"));                  //prependTo表示子元素添加到父元素内部首部
$("#div1").after($cr);                    //after表示在元素后面添加同胞元素
$cr.insertAfter($("#div1"));                 //insertAfter表示添加到指定元素的后面
$("#div1").before($cr);                     //before表示在元素前面添加同胞元素
$cr.insertBefore($("#div1"));                 //insertBefore表示添加到指定元素的前面