利用jQuery动态构造HTML元素

weixin_45823673

于 2020-04-12 23:56:08 发布

阅读量217

点赞数

文章标签： javascript jquery html5

本文链接：https://blog.youkuaiyun.com/weixin_45823673/article/details/105479316

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入jquery.js -->
    <script src="js/jquery.js"></script>
</head>
<body>
    
    <!-- 自定义模板 -->
    <div id="template">
        <div id="headDiv" style="width: 100%; height: 20px; background-color: red;">
            <span>标题一</span>
        </div>
        <div id="bodyDiv" style="width: 100%; height: 20px; background-color:rgb(43, 43, 163);">
            <span>标题二</span>
        </div>
    </div>

    <div id="box" style="width: 100%; height: 20px; background-color:rgb(145, 30, 120);"></div>
   
   
   <script>
        //1、 克隆一个模板
        var temp = $("#template").clone();
        //2、取出模板中的id="headDiv"标签元素的子元素<span>
        var headDiv_span = temp.find("#headDiv").find("span");
        //3、设置<span>中的文本内容
        headDiv_span.text("标题三");
        //4、动态的添加<div id="box">中
        headDiv_span.appendTo("#box");

    </script>
</body>
</html>