JQuery包裹DOM节点的方法

前端之家收集整理的这篇文章主要介绍了JQuery包裹DOM节点的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JQuery包裹DOM节点的方法分享给大家供大家参考。具体分析如下:

如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义。

wrap()

代码如下:
");

得到的结果如下:

  • PHP编程">简单易懂的PHP编程
  • 包裹节点操作还有其他两个方法,即wrapAll()和wrapInner()。

    wrapAll()方法

    方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹。JQuery代码如下:

    代码如下:
    ");

    使用wrapAll()方法包裹后的HTML是这样的:

  • wrapInner()方法

    方法将每一个匹配的元素的子内容包括文本节点)用其他结构化的标记包裹起来。

    代码如下:
    ");

    运行代码后,发现

    标签内的内容被一对
  • 标签包裹了,结果如下:

    简单易懂的JQuery编程
  • 本例的JQuery代码如下:

    元素把
  • 元素包裹起来 $("#li_1").wrap("

    "); }) $("#btn_2").click(function(){ $(".li_2").wrapAll("

    "); }) $("#btn_3").click(function(){ $("#li_4").wrapInner("

    "); }) }); //]]>
  • 希望本文所述对大家的jQuery程序设计有所帮助。

    原文链接:https://www.f2er.com/jquery/53927.html

    猜你在找的jQuery相关文章