需要帮助将 javascript 数组内容添加到现有的 HTML 代码段
Need help to add javascript array contents to an existing piece of HTML code
我的前端技能相当有限。我有一个训练有素的语言模型,可以生成 'tweets'。
我有这个 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 的顺风 CSS 实现:https://codepen.io/webcrunchblog/pen/xedQVv
目前显示固定字符串"Starhopper"。我想要做的是,遍历我的数组对象 'msg' 并使用适当的 UI 显示所有推文。
目前,addResponse() 作为 ajax 成功响应回调的一部分被调用。从那里我如何包含 tailwind CSS 代码,以便我可以在其自己的推文 UI 中显示每个数组元素?
希望问题清楚。
编辑:如果有人想尝试,请创建此代码笔:https://codepen.io/nikhilno1/pen/RwPBWvb
在输出中,有一条推文和三个句子。我想为每个句子创建 3 条推文。
我在这里更新了一些你的代码:https://codepen.io/rxna/pen/OJVwMOm
想法是:
克隆推文元素,为此添加了自定义 class:
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);
它并不完美,但希望你能理解。
我的前端技能相当有限。我有一个训练有素的语言模型,可以生成 'tweets'。 我有这个 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 的顺风 CSS 实现:https://codepen.io/webcrunchblog/pen/xedQVv
目前显示固定字符串"Starhopper"。我想要做的是,遍历我的数组对象 'msg' 并使用适当的 UI 显示所有推文。
目前,addResponse() 作为 ajax 成功响应回调的一部分被调用。从那里我如何包含 tailwind CSS 代码,以便我可以在其自己的推文 UI 中显示每个数组元素? 希望问题清楚。
编辑:如果有人想尝试,请创建此代码笔:https://codepen.io/nikhilno1/pen/RwPBWvb 在输出中,有一条推文和三个句子。我想为每个句子创建 3 条推文。
我在这里更新了一些你的代码:https://codepen.io/rxna/pen/OJVwMOm
想法是:
克隆推文元素,为此添加了自定义 class:
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);
它并不完美,但希望你能理解。