====== jQuery before after prepend append  ======
<WRAP left notice 80%>
  * description : jQuery before after prepend append
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2022-12-23 Fri
</WRAP>
<WRAP clear></WRAP>

===== before, after, prepend, append =====

==== after() ====
The after() method inserts specified content after the selected elements.\\
  after() 메소드는 선택된 요소의 뒤에 특정 내용을 삽입한다.
\\
<code html>
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
</code>
\\
<code jquery>
$( ".inner" ).after( "<p>Test</p>" );
</code>
결과\\
<code html>
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>
</code>

==== before() ====
The before() method inserts specified content in front of (before) the selected elements.\\
  before() 메소드는 선택된 요소의 앞에 특정 내용을 삽입한다.
\\
<code html>
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
</code>
\\
<code jquery>
$( ".inner" ).before( "<p>Je t'aime</p>" );
</code>
결과\\
<code html>
<div class="container">
  <h2>Greetings</h2>
  <p>Je t'aime</p>
  <div class="inner">Hello</div>
  <p>Je t'aime</p>
  <div class="inner">Goodbye</div>
</div>
</code>


==== append() ====
The append() method inserts specified content at the end of the selected elements\\
  append() 메소드는 선택된 요소의 끝(자식 요소)에 특정 내용을 삽입한다.
\\  
<code html>
<h2>Greetings>/h2>
<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>
</code>
\\
<code jquery>
$('.inner').append('<p>Test</p>');
</code>
결과\\
<code html>
<h2>Greetings>/h2>
<div class="container">
    <div class="inner">
        Hello
        <p>Test</p>    
    </div>
    <div class="inner">
        Goodbye
        <p>Test</p>    
    </div>
</div>    
</code>
\\
==== prepend() ====
The prepend() method inserts specified content at the beginning of the selected elements.\\
  prepend() 메소드는 선택된 요소의 시작(자식 요소)에 특정 내용을 삽입한다.
\\
<code html>
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
</code>
\\
<code jquery>
$( ".inner" ).prepend( "<p>Tiger</p>" );
</code>
결과\\
<code html>
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Tiger</p>
    Hello
  </div>
  <div class="inner">
    <p>Tiger</p>
    Goodbye
  </div>
</div>
</code>



{{tag> 오션 jQuery before after prepend append}}