js常用拼接DOM写法

范儿斯

已于 2022-12-05 12:26:10 修改

阅读量725

点赞数

分类专栏： # js常用拼接方法和问题文章标签： javascript 前端开发语言

于 2022-12-02 17:47:32 首次发布

本文链接：https://blog.csdn.net/Leader_yuxi/article/details/128151340

版权

js常用拼接方法和问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目场景：

js常用拼接DOM写法

这里写一个点击按钮生成DOM元素的场景代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>

    <button id="btn">点击生成按钮</button>
    
</body>

<script>



    $("#btn").click(function () {
    	var b = 'strParams';
    	//初级
    	//普通拼接
    	var btn = "<button title='"+b+"'>" + b + "</button>";//生成strParams按钮
        $("body").append(btn);
        //反引号``(模板字符串)拼接
        var btn2 = `<button title='${b}'>${b}</button>`;//生成strParams按钮
        $("body").append(btn2);

    })

</script>



</script>

</html>