1、创建节点
var aa = $("<div id='cccc'>插入的内容</div>") var bb = $("<a href='http://www.baidu.com'>百度一下</a>") //创建节点 //插入节点 // 内部插入 // 插入到内部的前面 // $("div").append(bb) // append:插入到节点内部的后面的 // $("h6").appendTo("div") // appendTo:把h6这个标签移动到div标签内部的后面,原来的h6标签将不复存在 // 插入到内部的后面 // $("div").prepend(bb) // prepend:插入到节点内部的前面的 // $("div").prependTo(bb) // prependTo:把h6这个标签移动到div标签内部的前面,原来的h6标签将不复存在 // 外部插入,相当于同级的插入,包括同级的后面和前面 // $("div").after(aa) // after:在div的同级标签的下面的位置插入一个aa的标签, // $("div").before(aa) // before:在div的同级标签的上面的位置插入一个aa的标签, // $("h6").insertBefore("div") // insertBefore:将指定的标签移到div标签的前面,原来的标签则不复存在 // $("h1").insertAfter("div") // insertAfter:将指定的标签移到div标签的后面,原来的标签则不复存在
2、操作节点,包括包裹,删除,替换,复制
$(function () { // $("div").wrap("<strong>包裹标签的内容</strong>") //用strong标签包裹住div标签 // $(function () { // $("div").wrap("<strong><em></em></strong>") // }) //用<strong><em></em></strong>双层标签包裹住div标签,这里是支持多层标签包裹的 // $("em").unwrap() //移除em标签外面的第一层包裹的标签 // wrap和wrapAll对比:就用下面的例子做解释,如果只有一个div,那么二者是没有区别的,如果有多个div,那么前者会把每个div作为一个独立的标签,然后用strong // 标签去分别包裹多个div标签,而后者会把两个div合为一体,也就是说用一个strong去包裹两个div // $("div").wrapAll("<strong>包裹标签的内容</strong>") // $("em").wrapInner("<div></div>") //wrapInner:的意思在里面包裹一层标签,同样,这个也支持多层标签的包裹 // 克隆节点 // $("div").click(function () { // alert("123") // }) // $("body").append($("div").clone()) // 克隆一个节点,然后把这个节点append到body标签内部,如果不带参数,或者参数为false,如果原来的标签有shijian,则不会复制 // $("body").append($("div").clone(true)) // 克隆一个节点,然后把这个节点append到body标签内部,如果带有参数,且参数为true,如果原来的标签有shijian,则会复制 // 删除节点,这个remove可以带有参数,参数可以做更多的过滤限制,比如id 比如class,如果为空,则会全部删除 // $("em").remove("#bbb") // 替换节点 $("#ccc").replaceWith("<h1>这个是被替换过的</h1>") })