网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

使用jQuery插入一个新的div

时间:2026-02-14 15:14:47

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

使用jQuery插入一个新的div

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

使用jQuery插入一个新的div

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

使用jQuery插入一个新的div

4、然后引入JQuery开发包jquery-3.3.1.min.js,在index.html文件中键入如下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>JQuery插入DIV</title>

</head>

<script type="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>

这是一个段落。

<button id="btn1">添加文本</button>

</body>

</html>

,如图所示:

使用jQuery插入一个新的div

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

使用jQuery插入一个新的div

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

使用jQuery插入一个新的div

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

使用jQuery插入一个新的div

使用jQuery插入一个新的div

© 2026 智德知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com