一、创建节点

var box = $(‘<div id =box>节点</div>‘);  //创建一个节点
$(‘body‘).appended(box);      //将节点插入<body>元素内部

二、插入节点

内部插入节点方法

append(content)         向指定元素的子节点的末尾位置插入节点

appendTo(content)        指定元素移入到指定元素的子节点的末尾

$("body").append($("<div>div节点1</div>")); //追加到body的里面(原有子元素的末尾) 可以直接写"<div>节点1</div>"
 $("body").append("文本节点"); //追加到body的里面(原有子元素的z尾)添加文本节点
 $("<div >节点2</div>").appendTo($("body")); //追加到body的里面 
 $(".box").appendTo($("body")); //页面原有的元素不新创建只是改变的其位置 append也是一样

prepend(content)         向指定元素的子节点的开头位置插入节点

prependTo(content)        指定元素移入到指定元素的子节点的开头

$("ul").prepend($("<li>li节点1</li>")); //追加到body的里面(原有子元素的开头) 可以直接写"<li>li节点1</li>"
 $("ul").prepend("li节点2"); //追加到body的里面 添加文本节点
 $("<li>li节点2</li>").prependTo($("ul")); //追加到body的里面(原有子元素的开头)
 $(".li").prependTo($("ul")); //页面原有的元素不新创建只是改变的其位置 prepend也是一样
元素外部插入节点方法

after(content)向指定元素的外部后面插入节点
before(content)向指定元素外部前面插入节点

$(".box").after($("<div>div节点1</div>")); //插入到指定元素的后面 可以直接写"<li>li节点1</li>" 也可以添加文本 
  $(".box").before($("<div>div节点2</div>")); //插入到指定元素的前面 可以直接写"<li>li节点2</li>" 也可以添加文本

insertAfter(content)将指定节点移到指定节点元素外部后面
insertBefore(content)将指定节点移到指定节点元素外部前面

$("<div>div节点3</div>").insertAfter($(".box")); //插入到指定元素的后面
 $("<div>div节点4</div>").insertBefore($(".box")); //插入到指定元素的后面 
        //  不能添加文本
        // 页面原有的元素不新创建只是改变的其位置

总结: append prepend after before 参数都可以是jQuery对象 和标签字符串( “< li>li节点1 < /li>”) 以及文本字符串.
appendTo appendTo insertAfter insertBefore 前面的必须是对象所有参数限制

三、节点操作

复制节点

$ (‘body’).append($(‘div’).clone(ture)); //复制一个节点添加到HTML中
clone(true)参数可以为空表示只复制元素和内容,不复制事件行为。而加上true就可以复制事件行为。

删除节点

$(‘div‘).remove(); //直接删除div元素

remove()不带参数时,删除前面指定元素。也可以带选择符参数,如$(‘div‘)remove(‘#box‘),只删除id=box的div。

保留事件的删除节点

$(‘div‘).detach(); //保留事件行为的删除

删除后本身方法可以返回当前被删除的节点对象。

清空节点

$(‘div‘).empty(); //删除节点里的内容。

替换节点

$(‘div‘).replaceWith(‘节点‘); //将div替换成span元素
$(‘节点‘).replaceAll(‘div‘); //同上
节点被替换后,所包含的事件行为就全部消失。