jQuery如何使用appendTo()方法？代码实例

appendTo()是jQuery中的内置方法, 用于在所选元素的末尾插入HTML元素。

语法如下：

$(content).appendTo(selector)

此处元素内容指定要插入的内容。

参数：

它接受参数"选择器", 该"选择器"指定要附加内容的元素。

返回值：

它返回修改后的选定元素。

jQuery代码显示此方法的工作方式：

代码1：

在下面的代码中, id内容与element

"跨度"

将附加到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 >

输出如下：

---