1、鼠标点击创建元素
- 在jQuery中,我们可以使用字符串的形式来创建一个元素节点,然后再通过append()、before()等方法把这个字符串插入到现有的元素节点中。
- 添加元素的方法:
//元素添加的方式1
var str = "字符串";
$().append(str);
//方式2
$().append("字符串")
-
说明:
append()方法表示把一个新元素插入到父元素的内部子元素的“末尾”。 -
HTML_jQuery代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var $li = "<li>jQuery</li>";
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li>黄飞鸿</li>
<li>叶问</li>
<li>李小龙</li>
</ul>
<input id="btn" type="button" value="添加" />
</body>
</html>
- 运行效果:
点击前:
点击后:
- 注意
var $li = "<li>jQuery</li>";
上面这一句代码表示创建一个字符串,然后将字符串赋值给变量li。其中li只是一个变量名而已,当然你也可以命名为a、str_li等,都没关系。不过,大家要注意一个变量的命名规范,凡是对于jQuery创建的节点字符串,我们命名的时候都习惯使用“$”开头,以便区别于其他的变量。
2、创建复杂元素
- 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var $li = "<li><a href='http://www.baidu.com'>百度</a></li>";
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.sina.com.cn">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ul>
<input id="btn" type="button" value="添加" />
</body>
</html>
运行效果:
- 点击前
- 点击后: