Javascript 为二维数组的每个元素指定一个html ID

如何为二维数组的每个元素添加持续的html ID，以便通过css访问每个元素

我希望仅使用一个阵列实现以下结构：

werk = [
[TextBla1,TextBla2],
[TextBla3,TextBla4]
 ]

<ol id="werk">
<li class="item">
<div id="text1">TextBla1</div>
<div id="text2">TextBla2</div>
</li>
<li class="item">
<div id="text3">TextBla3</div>
<div id="text4">TextBla4</div>
</li>
</ol>

werk=[
[TextBla1，TextBla2]，
[TextBla3，TextBla4]
]

文本bla1
文本bla2


文本bla3
文本bla4

我知道我可以像下面这样访问每个元素，但我不知道如何给每个元素一个特定的ID

var list = document.getElementById('werk'),
li = document.createElement('li'),
clone;
werk.forEach(function (item) {
clone = li.cloneNode();
clone.textContent = item;
clone.className = "item"; 
list.appendChild(clone);

for (var i = 0; i < item.length; i++) {
  alert(item[i]); ???
}

});

var list=document.getElementById（'werk'），
li=document.createElement（'li'），
克隆
工作地点（功能（项目）{
clone=li.cloneNode（）；
clone.textContent=项目；
clone.className=“项目”；
list.appendChild（克隆）；
对于（变量i=0；i

只需添加另一个

forEach

，因为

项是一个文本数组

var werk = [["Text1","Text2"],["Text3","Text4"]],
    list = document.getElementById('werk')

werk.forEach(function (item) {
    var clone = document.createElement('li');
    clone.className = "item"; 

    item.forEach(function(text) {
        var div = document.createElement('div');
        div.setAttribute("id", text);
        div.textContent = text;
        clone.appendChild(div);
    });

    list.appendChild(clone);
});

var werk = [["Text1","Text2"],["Text3","Text4"]],
    list = document.getElementById('werk')

werk.forEach(function (item) {
    var clone = document.createElement('li');
    clone.className = "item"; 

    item.forEach(function(text) {
        var div = document.createElement('div');
        div.setAttribute("id", text);
        div.textContent = text;
        clone.appendChild(div);
    });

    list.appendChild(clone);
});