JQuery appendTo()用法及代碼示例

appendTo()是jQuery中的內置方法，用於在所選元素的末尾插入HTML元素。
用法:

$(content).appendTo(selector)

此處元素內容指定要插入的內容。
參數：它接受參數“selector”，該參數指定要附加內容的元素。
返回值：它返回修改後的選定元素。

jQuery代碼顯示此方法的用法方式：
代碼1：
在下麵的代碼中，id內容與element“span”將附加到id“#hel”元件。

<html> 
   <head> 
      <meta charset="utf-8"> 
      <style> 
         #hel { 
         background: lightgreen; 
         display: block; 
         border: 2px solid green; 
         padding: 10px; 
         width: 300px; 
         } 
      </style> 
      <script src="https://code.jquery.com/jquery-1.10.2.js"> 
      </script> 
   </head> 
   <body> 
      <span>geeks Writer !!!</span> 
      <div id="hel">Hello-  </div> 
      <script> 
         $("span").appendTo("#hel"); 
      </script> 
   </body> 
</html>

輸出：

代碼2：
在下麵的代碼中，我們使用此方法直接附加“p”元素。

<html> 
   <head> 
      <meta charset="utf-8"> 
      <style> 
         body{ 
         display: block; 
         width: 250px; 
         height: 100px; 
         border: 2px solid green; 
         padding: 10px; 
         } 
      </style> 
      <script src="https://code.jquery.com/jquery-1.10.2.js"> 
      </script> 
   </head> 
   <body> 
      <h2>Greetings from gfg !</h2> 
      <div class="container"> 
         <div class="inner"> 
            Hello 
         </div> 
      </div> 
      <script> 
         $( "<p>Everyone !!!</p>").appendTo( ".inner" ); 
      </script> 
   </body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自kundankumarjha大神的英文原創作品 jQuery | appendTo() with Examples。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。