我正在将待办事项存储在一个对象数组中.我想映射数组以获取HTML元素.我可以用innerHTML来做这件事,但我想用createElement来做.

我期望<li><span>TEXT</span></li>个输出,但我只得到span个.append似乎不起作用.

HTML代码:

<div class="todo">
      <h1>Todo</h1>
      <form name="todo--form">
        <input type="text" name="todo--input" />
        <button
          type="submit"
          name="todo--submit"
          class="p-2 bg-slate-500 rounded"
        >
          Add
        </button>
      </form>
      <ul class="todo--list"></ul>
    </div>

JS代码:

const addTodoForm = document.querySelector(`[name="todo--form"]`);
const todoList = document.querySelector('.todo--list');
const todos = [];

// function getLabel() {}

function handleSubmit(e) {
  e.preventDefault();
  const text = this.querySelector(`[name="todo--input"]`).value;
  const item = {
    text: text,
    finished: false,
  };

  if (text) {
    todos.push(item);
    addTodoForm.reset();
    const todoItems = todos.map((todo, i) => {
      let newSpan = document.createElement('span');
      let newLi = document.createElement('li');
      newSpan.textContent = todo.text;
      let newEl = newLi.append(newSpan);
      return newEl;
    });
    console.log(todoItems);
    todoList.append(...todoItems);
  }
  return;
}

addTodoForm.addEventListener('submit', handleSubmit);

我的输出只有<span><span>个.

推荐答案

    const todoItems = todos.map((todo, i) => {
     let newSpan = document.createElement('span');
     let newLi = document.createElement('li');
     newSpan.textContent = todo.text;
     let newEl = newLi.append(newSpan);
     return newLi;
    });

Javascript相关问答推荐

Chromium会将URL与JS一起传递到V8吗?

我在我的Java代码中遇到了问题,代码的一部分看不到先前定义的对象

如何使onPaste事件与可拖动的HTML元素一起工作?

Chart.js-显示值应该在其中的引用区域

在数组中查找重叠对象并仅返回那些重叠对象

覆盖加载器页面避免对页面上的元素进行操作

当我在Reaction中创建一个输入列表时,我的输入行为异常

将范围 Select 器添加到HighChart面积图

如何在Java脚本中对数据进行签名,并在PHP中验证签名?

重新呈现-react -筛选数据过多

顶点图使用组标签更新列之间的条宽

我为什么要使用回调而不是等待?

每隔一行文本段落进行镜像(Boustrophedon)

验证Java脚本函数中的两个变量

为什么我的InDesign Java脚本不能完全工作?

对象作为react 子对象无效(已找到:具有键的对象{type,props}).如果要呈现一个子级集合,请改用数组

2.0.0-dev quill拖动文本不起作用如何使其拖动文本

使用IMAP搜索主题为空的邮箱

根据选定内容或设置编号将项目添加到数组

在Quill中,如何解析delta并替换其中的一些内容