Javascript 从DOM中读取HTML代码段并向其中添加自定义数据

我习惯于使用jQuery按元素的id查询元素，并将从Web服务检索到的一些自定义数据放在元素内部或属性中

但是现在我要检索的数据是一个对象数组。因此，这不仅仅是将一个数据添加到一个元素中的问题。我需要读一个

li

，里面有一些HTML，然后用一个对象的数据替换这个HTML上的一些元素

必须对数组中的每个对象执行此操作，因此我需要从该“模板”创建一个新的

li

，填充它，然后将其添加到

ul

我能够查询

ul

，找到它的

li

，并将其从DOM中删除，并向其附加多个

li

s

但我不知道如何在jQuery对象中使用

li

，对其内部HTML进行更改。这是我丢失的部分，因为我仍然无法在谷歌上找到解决方案

下面是一个例子：

如何基于

template

创建新对象并替换这两个

span

s的内容？我添加了第二个列表，其中有一个所需结果的示例。

您可以“在内存中”创建元素，而不将它们作为DOM的一部分，构建它们，然后根据需要将它们添加到DOM中，例如：

 var li = `$("<li>"); 
 li.html(innerHTML); 
 ul.append(li);

var li=`$（“
”）；
html（innerHTML）；
ul.附加（li）；

工作示例：

var ul=$（“ul”）；
$（“按钮”）。单击（函数（）{
var li=$（“
”）；
li.文本（“新项目”）；
ul.附加（li）；
});


项目


添加
这是一个普通的JS解决方案，使用JSON对象作为数据源和模板字符串

除非必须使用jQuery，否则在这种情况下没有理由使用它

<p>template:</p>
<ul id="myListContainer">

</ul>

<button onclick="createTemplateStrings()">
START
</button>

谢谢这是最简单的部分，移除和添加ul的元素。我搞不懂的是如何克隆模板并更改其跨度值。我不能只创建新的basic
li
s，因为我需要为Web服务列表上的每个对象更改其跨度值。根据您的其他注释，假设“模板”可能相当大，您需要
.clone
该模板，然后对该副本进行更改。用一个例子更新。本质上，它的工作方式完全相同-变量将存储对内存中元素的引用，而不是对DOM中已经存在的元素的引用。谢谢！所以，我不能从DOM中读取
li
的HTML，我必须将它完全放在javascript中？这将是一个非常大的HTML，大约有4个
span
s需要定制，所以我想避免在javascript中使用完整的内部HTML。我不太清楚你的意思是什么？您是否有4个静态LIs并希望更改InnerHTML？为什么不简单地给他们ID并更改innerHtml？对不起。在这个例子中，我有一个在其内部HTML中有两个跨距的模板li。我需要使用对象的属性更改这些跨距的值。看起来您只是在查找以下内容：
function createTemplateStrings (){

var obj = [
{"name": "John", "weekday" : "Wednesday"},
{"name": "Marry", "weekday" : "Sunday"},
{"name": "Edward", "weekday" : "Friday"},
{"name": "Jack", "weekday" : "Tuesday"}
]

let ul = document.getElementById('myListContainer')

for(let row of obj){

let li = document.createElement('LI')
li.innerHTML = `Hello, ${row.name}, how's your ${row.weekday} ?`
ul.append(li)

}


}