使用 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>
执行上述程序后,单击按钮即可将文本追加到文档正文的末尾。
广告