[英]Need help to add javascript array contents to an existing piece of HTML code
我的前端技能相当有限。 我有一个训练有素的语言模型,可以生成“推文”。 我有这个 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 回调的一部分。 从那里我如何包含顺风 CSS 代码,以便我可以在自己的推文 UI 中显示每个数组元素? 希望问题很清楚。
编辑:如果有人想尝试,请创建此代码笔: https ://codepen.io/nikhilno1/pen/RwPBWvb 在输出中,有一条推文和三个句子。 我希望为每个句子创建 3 条推文。
我在这里更新了一些你的代码: https : //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);
这并不完美,但希望你能明白。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.