代码学习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div{ width:200px; height:200px; background-color: aquamarine; } </style> <script type="text/javascript"> //DOM 中创建元素 //1,document.write("标签代码");缺陷:页面加载后创建元素, //把页面中原有的内容干掉 //2,innerHTML //3,document.createElement("标签的名字") //JQuery 中创建元素的方式 //1,$("标签的代码") //2,对象.html("标签的代码") //要求:点击按钮,在div中创建一个超链接 $(function(){ var i=0; $("#btn").click(function(){ i++; //首先创建元素 var obj=$("<a href='http://www.baidu.com'>百度"+i+"下</a>"); /* $("#dv").append(obj); */ //把元素添加到div 中 /* $("#dv").prepend(obj); */ //把元素插入到div 中某个元素的前面 /* $("#dv").after(obj); */ //把元素添加到当前div的后面 $("#dv").before(obj);//把当前元素添加到当前div的后面 }) }) </script> </head> <body> <h1>动态创建元素</h1> <hr > <input type="button" name="" id="btn" value="创建元素" /> <div id="dv"> </div> </body> </html>
Nearth===>WEB前端--第24课/JQuery/动态创建元素(点击按钮,在div中添加一个超链接)
最新推荐文章于 2022-05-19 09:06:15 发布