JQuery appendTo method: insert elements

jQuery , DOM- : , , , . jQuery appendTo() ( ). - , .

jQuery appendTo:

jQuery-, DOM-. :

$('span').appendTo(target);
$('p.red').appendTo(target);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

$('<div>Hello, world</div>').appendTo(target);
$('<i>Some text</i>').appendTo(target);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , , target. , jQuery appendTo() .

, .

$('span.test').appendTo(target);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

span test, target span.

target

jQuery appendTo() - . jQuery- :

$('h2').appendTo($('.container'));
$('p').appendTo('div');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

target, .

target jQuery-, , . , .

jQuery appendTo() jQuery-, . content .

jQuery appendTo()

.

:

<div class="parent">
  <div class="first-child">First Child</div>
  <div class="second-child">Second Child</div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

var child = $('<div class="third-child">ThirdChild</div>');
child.appendTo($('.parent'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

<div class="parent">
  <div class="first-child">First Child</div>
  <div class="second-child">Second Child</div>
  <div class="third-child">Third Child</div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

:

<div class="container">
  <div class="target">
    <div class="child">Child 1</div>
  </div>
  <div class="target">
    <div class="child">Child 2</div>
  </div>
  <div class="content-wrapper">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
  </div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.content .target:

$('.content').appendTo('.target');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

<div class="container">
  <div class="target">
    <div class="child">Child 1</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
  </div>
  <div class="target">
    <div class="child">Child 2</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
  </div>
  <div class="content-wrapper">
    
  </div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

target, content .

When working with the jQuery appendTo () method, it is important to understand the mechanics of inserting nodes and the peculiarities of manipulating sets of elements.