JQuery appendTo()用法及代码示例

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

用法:

$(content).appendTo(selector)

这里的元素内容指定要插入的内容。

参数：它接受参数“selector”，指定要附加内容的元素。

返回值：返回修改后的选定元素。

示例 1：在此示例中，id 内容与元素“span”将被附加到 id 后面“#hel”元素。

HTML


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

输出：

示例 2：在下面的例子中，我们直接附加一个“p”使用此方法的元素。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
      <script src= 
"https://code.jquery.com/jquery-1.10.2.js"> 
    </script> 
    <style> 
        body { 
            display: block; 
            width: 250px; 
            height: 100px; 
            border: 2px solid green; 
            padding: 10px; 
        } 
    </style> 
</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() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。