JSLite - 插入节点方法

收藏628

阅读9466

更新时间2022-04-11

如有疑问欢迎到这些地方交流,欢迎加入JSLite.io组织团伙共同开发!

prepend

插入到标签开始标记之后(里面的第一个)。
prepend(content)  ⇒ selfprepend(Function)  ⇒ self

$("#box").prepend("dd") //⇒ self
$("#box").prepend(function(){
    return "asdfasdf"
}) //⇒ self

prependTo

将生成的内容插入到匹配的节点标签开始标记之后。这有点像prepend,但是是相反的方式。
prependTo(selector)   ⇒ self

$("
test
").prependTo("#box")

append

插入到标签结束标记前(里面的结尾)。
append(content)  ⇒ selfappend(Function)  ⇒ self

$("#box").append("dd") //⇒ self

$("#box").append(function(){
    return "asdfasdf"
}) //⇒ self

appendTo

将生成的内容插入到匹配的元素标签结束标记前(里面的最后)。这个有点像append,但是插入的目标与其相反。appendTo(selector)   ⇒ self

$("
test
").appendTo("#box")

after

插入到标签结束标记后。(兄弟节点的下面)
after(content)  ⇒ selfafter(Function)  ⇒ self

$("#box").after("dd") //⇒ self
$("#box").after(function(){
    return "asdfasdf"
}) //⇒ self

insertAfter

插入的对象集合中的元素到指定的每个元素后面的dom中。这个有点像 after ,但是使用方式相反。
insertAfter(selector)   ⇒ self

$("

test

").insertAfter("#box") //⇒ self $("#input").insertAfter("#box")        //⇒ self  $("#input")

before

插入到标签开始前。
after(content)  ⇒ selfafter(Function)  ⇒ self

$("#box").before($("input")) //⇒ self
$("#box").before(function(){
    return "asdfasdf"
}) //⇒ self

insertBefore

将生成的内容插入 selector 匹配的节点标签开始前。这个有点像 before,但是使用方式相反。insertBefore(selector)   ⇒ self

$("

test

").insertBefore("#box")

unwrap

移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。 基本上,这种方法删除上一的祖先元素,同时保持DOM中的当前元素。replaceWith(content|fn)

$("p").unwrap() // ⇒ self

replaceWith

将所有匹配的元素替换成指定的HTML或DOM元素。
replaceWith(content|fn)


 
Hello

 
And

 
Goodbye



   $(".third").replaceWith($(".first"));  // ⇒ 返回 “.third” 节点
上面的结果


  And
  Hello

clone

clone()   ⇒ collection
通过深度克隆来复制集合中的所有元素。(通过原生 cloneNode 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。)

$("body").append($("#box").clone())

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.9万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.4万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.1万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.8万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.5万人学习

热门下载

更多
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号