jQuery和JS中的添加节点方法

jQuery和JS中的添加节点方法,第1张

jQuery append() 方法在被选元素的结尾插入内容。

实例

$("p").append("Some appended text.")

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("p").prepend("Some prepended text.")

JS原生API插入节点的方式大致有innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement这6种。

innerHTML:获取标签内部的HTML内容。

outerHTML:获取包括目标标签在内,以及内部HTML的内容。

appendChild:向目标标签末尾添加子节点,返回参数节点。

insertBefore:向目标节点的第二个参数位置添加第一个参数为子节点,返回第一个参数。

insertAdjacentHTML:向目标节点的指定位置添加节点;第二个参数为要添加的节点,第一个参数指定位置,位置包括beforebegin(添加为previousSibling)、afterbegin(添加为firstChild)、beforeend(添加为lastChild)、afterend(添加为nextSibling)。它还有两个兄弟函数,分别是insertAdjacentElement和insertAdjacentText,前者添加元素并返回该元素,后者添加文本。

applyElement:IE的函数,将参数节点设置成目标节点的外包围或者内包围;第一个为参数节点,第二个参数指定方式,方式包括inside(内包围,即参数节点将目标节点的子节点包起来)、outside(外包围,即参数节点将目标节点包起来)。

想要使用jQuery将元素移动到另一个元素中,可以使用jQuery的内置方法append()或prepend()。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

方法1:使用append()方法

jQuery的append()方法用于在所选元素的末尾插入一些内容。

语法:

参数: 此方法接受上述两个参数

● content:它是必需参数,用于指定要在所选元素末尾插入的内容。content的可能值是HTML元素,jQuery对象和DOM元素。

● function(index,html):它是可选参数,用于指定将返回要插入的内容的函数。

● index:用于返回元素的索引位置。

● html:用于返回所选元素的当前HTML。

示例:

效果图:

方法2:使用prepend()方法

prepend()方法是jQuery中的内置方法,用于在所选元素的开头插入指定的内容。

语法:

参数: 此方法接受上述两个参数

● content:需要参数,用于指定需要插入的内容。

● function:可选参数,用于指定调用后执行的函数。

示例:

效果图:

更多 前端开发 知识,请查阅 HTML中文网 !!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7868284.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-10
下一篇 2023-04-10

发表评论

登录后才能评论

评论列表(0条)

保存