Javascript jqueryappend方法返回html标记而不是正确的格式

该功能用于测验，我正在检索测验的数据，即问题和答案，并将其附加到我的div having id test_框中。数据已成功检索，但它没有正确格式化数据，而是以html标记的形式返回给我

以下是我的代码片段：

 const url = window.location.href

 const testBox = document.getElementById('test_box')


$.ajax({
    type: 'GET',
    url: `${url}/data`,
    success: function(response){
        const data = response.data
        data.forEach(element => {
            for (const [question, answers] of Object.entries(element)){
                 testBox.append(`
                 <div class="question_box">
                     <div>
                        <b>${question}</b>
                     </div>
                     `);
                 answers.forEach(answer => {
                    testBox.append(`
                     <div>
                         <input type="radio" class="ans" id=${question}-${answer}" name="${question}" 
                         value="${answer}">
                         <label for="${question}">${answer}</label>
                    </div>
                     `)
                 })
                 testBox.append(`</div>`);
            }
        
        });
    },
     error: function(error){
         console.log(error)
     }
});

---

您可以首先在dom中附加外部div，即：

question\u box

，然后在

question\u box

中附加选项，您可以使用

$（“#test\u box.question\u box:last”）

这将针对添加的最后一个问题，并在那里附加选项

演示代码：

//仅用于演示。。
风险值数据=[{
“1000-100=？”：[“a”、“v”、“c”、“d”]
}, {
“1+1=？”：[“a”、“v”、“c”、“d”]
}]
data.forEach（元素=>{
for（对象项（元素）的常量[问题，答案]）{
//像这样使用它。。
$（“#测试框”）。附加(`
${问题}
`);
答案。forEach（答案=>{
//现在要在问题框内附加问题，请使用：last
$（“#测试框。问题框：最后一个”）。追加(`
请详细说明并显示
数据的输出。@Swati，输出如下：1+1=？而不是
文档。getElementById（'test_box'）
使用
$（“#test_box”）.append..
不要将jquery和js混合使用。@Swati，它会变好。但是div的渲染不正确。我将发布一张图片，并显示
响应的输出。数据
以及：）
 Array(2)0: {1000-100 = ?: Array(4)}1: {1 + 1 = ?: Array(4)}length: 
 2__proto__: 
 Array(0)