全栈工程师开发手册 (作者:栾鹏)

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表示添加到指定元素的前面