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

2021年3月20日17:16:38 发表评论 638 次浏览

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 >

输出如下:

jQuery |带有示例的appendTo()1

代码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 >

输出如下:

jQuery |带有示例的appendTo()2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: