我的頁面上有一個 div：
<div id="report"></div>
我正在嘗試使用以下方法將過濾后的陣列轉換為該 div 中的嵌套 UL：
let arr = csvData.filter(row => unchecked.includes(row[0]))
console.log(arr);
const div = document.getElementById("report");
const prepareUL = (root, arr) => {
let ul = document.createElement('ul');
let li;
root?.appendChild(document.createElement('ul'));
arr.forEach(function(item) {
if (Array.isArray(item)) {
prepareUL(li, item);
return;
};
li = document.createElement('li');
li.appendChild(document.createTextNode(item));
ul.appendChild(li);
});
}
prepareUL(div, arr);
如果我不檢查根是否存在，讀取未定義的 appendchild 時會出錯。我正在運行延遲的javascript。陣列正確記錄到控制臺。奇怪的是，如果我只是：
div.innerHTML = arr;
更新：如果我將陣列更改為一個簡單的分配陣列，例如：
const arr = [
'Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'],
'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'
];
它也有效。
它用（未格式化的）陣列填充 div。那么為什么innerHTML 沒有找到元素的問題，而上面的函式卻不能呢？
非常感謝您的幫助。
uj5u.com熱心網友回復：
在forEach你的電話里
prepareUL(li, item);
那時，li是undefined，因此里面prepareUL(root, arr) root將是undefined。
uj5u.com熱心網友回復：
正如 connexo 在遞回呼叫函式li時指出的那樣是未定義的。prepareUL因此li，在呼叫之前創建prepareUL可能是正確的做法。
let arr = ['url', 'url1', ['url2', 'url3', 'url4']]
const div = document.getElementById("report");
const prepareUL = (root, arr) => {
let ul = document.createElement('ul');
root.appendChild(ul);
arr.forEach(function(item) {
let li = document.createElement('li');
if (Array.isArray(item)) {
prepareUL(li, item);
ul.appendChild(li);
return
};
li.appendChild(document.createTextNode(item));
ul.appendChild(li);
});
}
prepareUL(div, arr);<div id="report"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/508426.html
標籤：javascript