养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

使用jQuery插入一个新的div

时间:2024-11-10 19:00:15

使用JQuery插入一个新的div

使用jQuery插入一个新的div

工具/原料

电脑

HBuilder

方法/步骤

1、鼠标点击打开HBulider软件,如图所示:

使用jQuery插入一个新的div

2、点击文件--->新建--Web项目,如图所示:

使用jQuery插入一个新的div

3、输入web项目名:JQueryDemo,然后点击完成按钮,如图所示:

使用jQuery插入一个新的div

4、然后引入JQuery开发包jquery-3.3.1.min.js,在index.html文件中键入如下代码:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>JQuery插入DIV</title> </head> <scripttype="text/javascript"src="js/jquery-3.3.1.min.js"></script> <script>$(document).ready(function(){$("#btn1").click(function(){$("p").append("<div>插入DIV</div>");});});</script> <body> <p>这是一个段落。</p> <buttonid="btn1">添加文本</button> </body></html>,如图所示:

使用jQuery插入一个新的div

5、然后点击运行---浏览器运行,如图所示:

使用jQuery插入一个新的div

6、运行结果如图所示:鼠标点击添加文本按钮,如图所示:

使用jQuery插入一个新的div

7、可以看到后台代码已经添加一个DIV标签,如图所示:

使用jQuery插入一个新的div

使用jQuery插入一个新的div

© 一点知识