Home > Web Front-end > JS Tutorial > jquery operates DOM elements (2)

jquery operates DOM elements (2)

黄舟
Release: 2016-12-16 10:42:28
Original
1134 people have browsed it

.after()
  在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。
  .after(content[,content])
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
  .after(function)
    function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
  结构:
    


      

Greetings


      
Hello

      
Goodbye

    

    $('.inner').after('

Test

');
  效果:
    

      

Greetings


      
Hello

      

Test


      
Goodbye

      

Test


    


.before()
  根据参数设定,在匹配参数的前面插入插入内容。
  .after(content[,content])
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
  .after(function)
    function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
  结构:
    


      

Greetings


      
Hello

      
Goodbye

    

    $('.inner').before('

Test

');
  效果:
    

      

Greetings


      

Test


      
Hello

      

Test


      
Goodbye

    


.insertAfter()
  在目标元素的后面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
  .insertAfter(target)
    target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标后面。
  结构:
    


      

Greetings


      
Hello

      
Goodbye

    

    $("

Test

").insertAfter('.insertAfter');
  效果:
    

      

Greetings


      
Hello

      

Test


      
Goodbye

      

Test


    

.insertBefore()
Insert each matching element in the set in front of the target element, and the inserted element is regarded as the sibling element of the target element.
  .insertBefore(target)
   target is a selector, element, HTML string or object. Matching elements will be inserted in front of the target specified by the parameter.
  Structure:
  


   

Greetings


   
Hello

   

  

   $("

Test

").insertBefore('.insertAfter');
  Effect:
  

   

Greetings


   

Test


   
Hello

   gt;
   
Goodbye

 

The above is the content of jquery operating DOM elements (2). For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template