創建html元素並使用for循環（或映射？）附加子元素

Question

我想創建一個函數，它將一個字符串作爲輸入，創建多個元素，然後將每個元素附加到之前創建的元素，以便文本以範圍內的div顯示爲列表項目。目的是最終做一個基本的待辦事項列表，但現在我堅持基本步驟

我認爲一個for循環可以用於創建元素，雖然我不知道如何追加我之前附加的內容。下面是我如何開始的：

const elementsArray = [ 
          'ol', 
          'li', 
          'div', 
          'span', 

          ]; 

const makeToDoItem = (toDoItem) => { 

    for (i = 0; i < elementsArray.length; i++) { 

    const createElement = 
    document.createElement(elementsArray[i]); 
    document.body.appendChild(createElement); 
        }; 
       }; 

makeToDoItem("post on stackoverflow"); 

我明白

document.body.appendChild(createElement); 

是做什麼我告訴它做的事：創建體內四大元素。我如何以我想要的方式追加它們？

.map函數是否更好？我無法理解如何在這裏應用.map。

感謝您的幫助！

Answer 1

const elementsArray = [ 
 
          'ol', 
 
          'li' 
 
          ]; 
 

 
const makeToDoItem = (toDoItem) => { 
 

 
    for (i = 0; i < elementsArray.length; i++) { 
 

 
     const createElement = 
 
     document.createElement(elementsArray[i]); 
 
     if (elementsArray[i] === 'li') { 
 
     createElement.textContent = toDoItem; 
 
     } 
 
     document.body.appendChild(createElement); 
 
    }; 
 
}; 
 

 
makeToDoItem("post on stackoverflow"); 
 
makeToDoItem("another post");

你可以做上面的，而是你可能希望創建裏面的< OL>在HMTL然後追加< LI>元素。