注意:下面的方法插入或者追加的内容可以是自己创建的新节点,同时也可以是已经存在的html标记的元素节点,若为已存在的元素节点,则次元素节点将会被移动到其所对应的操作的位置。 1、prepend 在ta
注意:下面的方法插入或者追加的内容可以是自己创建的新节点,同时也可以是已经存在的html标记的元素节点,若为已存在的元素节点,则次元素节点将会被移动到其所对应的操作的位置。
1、prepend
在 target 的头部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的first子节点
父元素 挂 子元素
$('target').prepend( new_jquery_element / $('selector') );
2、append
在 target 的尾部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的last子节点
父元素 挂 子元素
$('target').append( new_jquery_element / $('selector') );
3、prependTo
在 target 的头部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的first子节点
子元素 挂到 父元素
new_jquery_element / $('selector').prependTo( $('target') );
4、appendTo
在 target 的尾部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的last子节点
子元素 挂到 父元素
new_jquery_element / $('selector').appendTo( $('target') );
5、before
在 target 的前部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的prev兄弟节点
目标 挂 内容
$('target').before( new_jquery_element / $('selector') );
6、after
在 target 的后部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的next兄弟节点
目标 挂 内容
$('target').after( new_jquery_element / $('selector') );
7、insertBefore
在target的前部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的prev兄弟节点
内容 挂到 目标
$( new_jquery_element / $('selector') ).insertBefore( $('selector') );
8、insertAfter
在 target 的后部添加,将你新创建的元素节点or选择的元素节点插入并作为其最新的next兄弟节点
内容 挂到 目标
$( new_jquery_element / $('selector') ).insertAfter( $('target ') );
总结:
append appendTo
prepend prependTo
before insertBefore
after insetAfter
功能一样,只不过是谁去做内容谁去做目标
JS插入新元素/设置添加新属性节点
//创建元素节点var container = document.createElement('div');var content = document.createElement('p');//创建文本节点var title = document.createTextNode('this is title');//创建属性节点var dateAttr = document.createAttribute('date');dateAttr.value = new Date();//普通挂载content.appendChild(title);container.appendChild(content);//属性节点挂载 注意别和setAttribute混了container.setAttributeNode(dateAttr);