一、创建节点
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‘); //同上
节点被替换后,所包含的事件行为就全部消失。