html动态新增div元素

1.图片截图：

在这里插入图片描述
2.前端代码如下：

<!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>新增</title>
</head>
<body>
    <!-- 楼层信息 -->
    <form id="addForm" class="form-horizontal">
    <div class="floor">
        <div class="floor_information">楼层信息
            <div class="floor_information_add"> <button onclick="addFloor()" type="button" class="btn btn-info">+</button></div> 
        </div>
        <!-- 层数新增1 -->
        <div  class="layer_add"  id="add">
            <div class="first_layer">第1层</div>
            <div class="layer_information_add"> <button onclick="addTr()" type="button" class="btn btn-info">+</button></div>     
         </div>
  </div>
</form>

</body>
</html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var row =1; //行数
var floor_number =2; //楼层

$(function () {
//新增楼层
    addFloor =function () {
     //新增时获取楼层的id,方便定位新增
     var floorObj =document.createElement("div");
         floorObj.id = new Date().getTime();
       floorObj.innerHTML="\"form-group\">\n" +
        "\"floor\">\n" +
        " \"layer_add\">\n" +
            "\"first_layer\">\n第"+floor_number+"层" +
            "    
\n" +
            "  \"layer_information_add\"> 
" +
            "    
\n" +
            "
\n";
    document.getElementById("addForm").appendChild(floorObj);
    floor_number++;
    }

    
addTr = function(){
    //新增行数测试 获取层数的id，进行对应的新增操作
    // console.log(floor_number)

    var trObj =document.createElement("div");
    trObj.id = new Date().getTime();
    trObj.innerHTML = 
    " \"layer_information\">\n" +
        // "        \"delete_layer\">x
\n" +
        "        \"delete_layer\">
\n" +
         "    室号：\"room\" class=\"common\" type=\"text\"/>
\n" +
         "        面积：\"area\" class=\"common\"  type=\"text\"/>
\n" +
         "         用途：\n" +
            "
\n";
            document.getElementById("add").appendChild(trObj);
}

//删除某层的事件
deleteTr = function(obj){
    var trId = obj.parentNode.parentNode.id;  
        var trObj = document.getElementById(trId);  
        document.getElementById("add").removeChild(trObj);  
}

//获取点击事件的id
$('#addForm').click(function(){
    theId = $(this).attr('id');
    console.log(theId)
})
    
}) 
</script>

<style>
    /* 设置样式 */
    .sstyle {
        color: aqua;
    }
    .floor{
        margin-left: 400px;
        width: 1000px;
    }
    /* 楼层信息 */
    .floor_information{
        display: flex;
        height: 40px;
        width: 1000px;
        
        border: 1px solid;
    }
    .floor_information_add{
        margin-top: 4px;
        margin-left: 900px;
        width: 25px;
        height: 25px;
        text-align: center;
        background-color: aquamarine;
    }

    /* 层数新增 */
    .layer_add {
        display: inline-block;
        margin-top: 20px;
        width: auto; height: auto;
        border: 1px solid;
    }
    /* 新增 */
    .layer_information_add{
        display: inline-block;
        margin-left: 950px;
        width: 25px;
        height: 25px;
        text-align: center;
        background-color: aquamarine; 

    }
    .layer_type_add{
        display: flex;
    }
  
    .first_layer{
        height: 40px;
        width: 1000px;
        margin-top: 10px;
        border: 1px solid;
        background-color: antiquewhite;
    }
    /* 层数删除 */
    .delete_layer{
        width: 20px;
        height: 20px;
        float: right;
        text-align: center;
        color: white;
        background-color: red;
    }
    /* 层数详细信息 */
    .layer_information{
        float: left;
        margin: 20px 20px;
        height: 120px;
        width: 180px;
        border: 1px solid;
    }

    .layer_information_i {
        /* float: left; */
        margin: 33px 20px;
        height: 120px;
        width: 180px;
        border: 1px solid;
    }
    /* input大小 */
    .common {
        margin-top: 10px;
        width: 80px;
    }
    .common_way{
        margin-top: 10px;
        width: 89px;
    }
</style>

相关阅读:
使用spring security实现角色继承的权限控制
2022-07-20
【报错】 Cannot create property ‘showColumn‘ on number ‘-1‘
仿牛客网项目---社区首页的开发实现
Kibana生产上的常用功能总结
通过数组的指针获得数组个数
SQL优化记录
c++征途 --- 函数提高
c++11 智能指针（std::shared_ptr）（五）
ext2文件系统体会-xattr

原文地址：https://blog.csdn.net/weixin_41823246/article/details/127108600