<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="myDiv">这是原始内容。</div> <button onclick="addHtml()">点击添加HTML</button> <script> function addHtml() { // 添加标题 $("#myDiv").prepend("<h1>这是一个标题</h1>"); // 添加文章 var article = "在当今的科技时代,人工智能、大数据、云计算等技术的快速发展,正在深刻地改变着我们的生活,这些技术的发展,不仅带来了便利,也带来了挑战,人工智能的发展,使得许多传统的工作被机器取代,这无疑给社会带来了巨大的冲击,这也为人们提供了新的就业机会,使得人们可以有更多的选择,大数据的发展,使得我们可以通过分析大量的数据,来预测未来的趋势,这对于我们的决策具有重要的参考价值,云计算的发展,使得我们可以随时随地访问到我们需要的资源,这对于我们的生活和工作都带来了极大的便利,科技的发展,既有利也有弊,我们需要正视这些问题,积极应对。"; $("#myDiv").append(article); } </script> </body> </html>
在这个示例中,我们首先创建了一个按钮,当点击这个按钮时,会调用addHtml()
函数,在这个函数中,我们使用.prepend()
方法在#myDiv
元素的内容前面添加了一个标题,然后使用.append()
方法在#myDiv
元素的内容后面添加了一篇文章。
还没有评论,来说两句吧...