使用 jQuery 创建一个包含一些文本的段落元素,并将其追加到文档正文的末尾。


本文的任务是创建一个包含一些文本的段落元素,并使用 jQuery 将其追加到文档正文的末尾。

使用 jQuery,可以轻松地在 HTML 文档的特定位置添加新的元素/内容。我们有四种方法可以用来添加新的内容

  • append() − 此方法将内容添加到所选元素的末尾。

  • prepend() − 此方法将内容添加到所选元素的开头。

  • after() − 此方法将内容添加到所选元素之后。

  • before() − 此方法将内容添加到所选元素之前。

这里,任务是将包含一些文本的段落元素添加到文档正文的末尾。因此,我们使用 append() 方法。

语法

以下是 jQuery append() 方法的语法:

$(selector).append("content");

“content”是必需参数。它指定要添加的内容(也可以包含 HTML 标签)。

示例

在下面的示例中,我们创建一个包含一些文本的段落元素,并使用 jQuery append() 方法将其追加到文档正文的末尾:

<!DOCTYPE html>
<head>
   <title>Append Text Example</title>
   <!-- Import jQuery cdn library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      $(document).ready(function () {
         $("button").click(function () {
            $("body").append("<p>The text is appended.</p>");
         });
      });
   </script>
</head>
<body style="text-align: center;">
   <h1 style="color: seagreen;">Welcome to Tutorialspoint</h1>
   <p>Click the button below to append text at the end of this document.</p>
   <button>Click Here!</button>
</body>
</html>

执行上述程序后,单击按钮即可将文本追加到文档正文的末尾。

更新于:2024年2月9日

52 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告