需要帮助将 JavaScript 数组内容添加到现有的 HTML 代码片段中

Question

我的前端技能相当有限。我有一个训练有素的语言模型，可以生成“推文”。我有这个 javascript 函数，当前将推文显示为一个段落。

function addResponse(msg) {

    document.getElementById("results").textContent = ""

    var para = document.createElement("div");

    var s = "<div class='center' id='gpt2'> <b> Here what our BOT has to say... </b> </br></br>"

     i = 1

     for (var key in msg){

         var value = msg[key];

         console.log(value);

         s = s + i + ") " + " <b>" + value + "</b> </br></br>"

         i = i + 1

     }

    para.innerHTML = s + "</div>";

    document.getElementById('append').appendChild(para);

  }

我不想显示在段落中，而是显示为正确的推文。这是一个用于创建推文 UI 的 tailwind CSS 实现：https://codepen.io/webcrunchblog/pen/xedQVv

目前，这显示固定字符串“Starhopper”。我想要做的是，循环遍历我的数组对象“msg”并使用正确的 UI 显示所有推文。

目前，addResponse() 被调用作为 ajax 回调的一部分以获得成功响应。从那里我如何包含 tailwind CSS 代码，以便我可以在自己的推文 UI 中显示每个数组元素？希望问题清楚。

编辑：如果有人想尝试，请创建此 codepen：https://codepen.io/nikhilno1/pen/RwPBWvb 在输出中，有一条推文和三个句子。我希望为每个句子创建 3 条推文。

Answer 1

我在这里更新了一些代码： https:&nbsp;//codepen.io/rxna/pen/OJVwMOm这个想法是：克隆 tweet 元素，并为此添加了一个自定义类：var articleNode = document.querySelector(".tweet-body"); var clone = articleNode.cloneNode(true);更新每个元素内的文本：var title = clone.querySelector(".tweet-text"); title.innerText = value;最后添加到 DOM 中：document.getElementById("append").appendChild(clone);它并不完美，但希望您能明白。