前端HTML调用jQuery库，鼠标点击创建元素（前端：HTML搭配jQuery系列教程三）

最新推荐文章于 2022-10-24 15:41:22 发布

Kkh_8686

最新推荐文章于 2022-10-24 15:41:22 发布

阅读量258

点赞数 1

分类专栏： web端 flask python 文章标签： html5 css jquery

本文链接：https://blog.csdn.net/K_AAbb/article/details/116905033

版权

python 同时被 3 个专栏收录

43 篇文章 14 订阅

订阅专栏

web端

17 篇文章 1 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

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>

运行效果：

点击前
点击后：

Kkh_8686

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端HTML调用jQuery库，鼠标点击创建元素（前端：HTML搭配jQuery系列教程三）

1、鼠标点击创建元素在jQuery中，我们可以使用字符串的形式来创建一个元素节点，然后再通过append()、before()等方法把这个字符串插入到现有的元素节点中。添加元素的方法：//元素添加的方式1var str = "字符串";$().append(str);//方式2$().append("字符串")说明：append()方法表示把一个新元素插入到父元素的内部子元素的“末尾”。HTML_jQuery代码实现:<!DOCTYPE html>&lt
复制链接

扫一扫

专栏目录