使用 for 循环（或映射？）创建 html 元素并附加子元素

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");

您可以执行上述操作，但您可能希望在 HMTL 中创建

，然后在其中添加
1. 元素。