我现在需要手动添加内容，怎么样让JS生成的DIV根据数据库内容自动生成？

Question

PHP：

<?PHP
header("Content-Type: text/html; charset=utf-8");
include('conn.php');
$sql = "select * from article";
$res = mysqli_query($conn,$sql);
$arr = [];
while ($row = mysqli_fetch_array($res)){
$arr[] = $row['id'];
$arr[] = $row['art_name'];
}
echo json_encode($arr);
?>

Ajax:

//获取文章名称和id
$(document).ready(function(){
    $.ajax({
        url : "./php/active.php",
        type : "post",
        async : false,
        success : function(msg) {
            var res = JSON.parse(msg);
            $("#art_name").append(res[1]);
            $("#id").append("[ID:" + res[0] + "]");
        },
    })
})

Js:

<script src="./js/ajax.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var article_list = document.getElementById('tw_xinxi');
        var tw_lanmu = document.createElement("div");
        tw_lanmu.innerHTML="<div class='card_bordered' style='margin: 20px 0px; border-left: 4px solid rgb(24, 144, 255);'>
        <div class='card_body'>
            <div class='cardTitle'>
                <span>
                    <span id='art_name' style='font-weight: 700;'>&nbsp;&nbsp;</span>
                    <span id='id' style='color: rgb(24, 144, 255); padding-left: 10px;'></span>
                </span>
                <span style='float: right;'>
                    <button type='button' class='btn_default' style='margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;'>
                        <span>客户资料</span>
                    </button>
                    <button type='button' class='btn_default' style='margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;'>
                        <span onclick='javascript:window.location.href='edit.html''>编辑</span>
                    </button>
                    <button type='button' class='btn_default' style='margin-left: 15px; color: rgb(255, 97, 84); border-color: rgb(255, 97, 84); border-radius: 3px;'>
                        <span>删除</span>
                    </button>
                </span>
            </div>
            <div style='padding: 0px 20px; height: 80px;'>
                <div class='row_flex' style='height: 80px;'>
                    <div class='col_span_1'>
                        <p style='padding: 0px; line-height: 30px;'>推文地址：</p>
                    </div>
                    <div class='col_span' style='border-left: 1px solid rgb(222, 222, 222); padding-left: 10px;'>
                        <p style='padding: 0px; line-height: 30px; font-size: 12px;'>状态：
                            <span style='color: rgb(24, 144, 255);'>启用</span>
                            <span style='color: rgb(130, 130, 130); display: none;'>停止</span>
                        </p>
                        <p style='padding: 0px; line-height: 30px;'>
                            <button type='button' class='btn_default' style='background: rgb(24, 144, 255); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none; display: none;'>
                                <span>开始</span>
                            </button>
                            <button type='button' class='btn_default' style='background: rgb(247, 179, 57); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none;'>
                                <span>停止</span>
                            </button>
                        </p>
                    </div>
                    <div class='col_span' style='text-align: right; position: relative;'>
                        <div style='position: absolute; width: 60px; height: 60px; right: 0px; top: -30px;'>
                            <img src='./image/1599475563268843.png' style='width: 100%; height: 100%;'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>";
    article_list.appendChild(tw_lanmu);
    }
</script>

效果图：

数据库截图：

我在js里面innerHTML了div的样式，效果如图上所示，左上角是对应了数据库中的art_name和id，但是现在只有一条，**我想知道下面这些内容怎么修改：
1、Js中的div样式怎么根据数据库中内容的数量自动生成？我目前现在只能手动添加。
2、Ajax获取PHP的返回值是个数组，我手动添加的div样式，获取数据库的id和name需要使用另外的span id，也是手动添加，然后append对应在数组res[]的位置，怎么样能自动获取不同id和name的进行显示？
3、Js的div样式中，编辑按钮有设定跳转页面，点击按钮会报错：
Uncaught SyntaxError: Unexpected end of input
说我标点符号错误，但是又不能使用""引号，怎么改能进行跳转？**

Answer 1

请求返回是个数组吧

var html = null;
for(let i=0;i<arr.length;i++){ 
    html+="
    <div>
        //自定义
    <div>"
    
}
xxx.append(html)