如何为insertAdjacentHTML创建的li元素添加类？附代码示例

我想用insertAdjacentHTML创建li元素，但不知道怎么根据todo.complete状态修改li的类名和按钮文本——之前用append的方式能实现，但换成insertAdjacentHTML后就卡壳了。相关代码如下：

function todosGenerator(todosList) {
todoListElem.innerHTML = ''

    // let newTodoLiElem, newTodoLabalElem, newTodoCompleteBtn, newTodoDeleteBtn


    todosList.forEach(function (todo) {
    //     console.log(todo);
    //     newTodoLiElem = $.createElement('li')
    //     newTodoLiElem.className = 'completed well'

    //     newTodoLabalElem = $.createElement('label')
    //     newTodoLabalElem.innerHTML = todo.title

    //     newTodoCompleteBtn = $.createElement('button')
    //     newTodoCompleteBtn.className = 'btn btn-success'
    //     newTodoCompleteBtn.innerHTML = 'Complete'
    //     newTodoCompleteBtn.setAttribute('onclick', 'editTodo(' + todo.id + ')')

    //     newTodoDeleteBtn = $.createElement('button')
    //     newTodoDeleteBtn.className = 'btn btn-danger'
    //     newTodoDeleteBtn.innerHTML = 'Delete'
    //     newTodoDeleteBtn.setAttribute('onclick', 'removeTodo(' + todo.id + ')')

        // if (todo.complete) {
        //     newTodoLiElem.className = 'uncompleted well'
        //     newTodoCompleteBtn.innerHTML = 'UnComplete'
        // } // 换成insertAdjacentHTML后不知道怎么写这段逻辑了

        // newTodoLiElem.append(newTodoLabalElem, newTodoCompleteBtn, newTodoDeleteBtn)

        // todoListElem.append(newTodoLiElem)

        todoListElem.insertAdjacentHTML('beforeend','<li class="completed well is"><label>'+todo.title+'</label><button class="btn btn-success" onclick="editTodo('+todo.id+')">Complete</button><button class="btn btn-danger" onclick="removeTodo('+todo.id+')">Delete</button></li>')

    
    })
    
}

给你两种可行的处理方式：

方式1：动态拼接HTML字符串（推荐） #

直接在拼接HTML的时候，根据todo.complete的值动态生成对应的类名和按钮文本，用ES6模板字符串会比传统字符串拼接更清晰，还能避免转义麻烦：

function todosGenerator(todosList) {
  todoListElem.innerHTML = ''

  todosList.forEach(function (todo) {
    // 根据状态确定类名和按钮文字
    const liClass = todo.complete ? 'uncompleted well' : 'completed well is';
    const completeBtnText = todo.complete ? 'UnComplete' : 'Complete';

    // 用模板字符串拼接HTML，直接插入动态内容
    todoListElem.insertAdjacentHTML('beforeend', `
      <li class="${liClass}">
        <label>${todo.title}</label>
        <button class="btn btn-success" onclick="editTodo(${todo.id})">${completeBtnText}</button>
        <button class="btn btn-danger" onclick="removeTodo(${todo.id})">Delete</button>
      </li>
    `);
  })
}

方式2：插入后再修改元素 #

如果不想改动现有的字符串拼接逻辑，可以在insertAdjacentHTML插入完成后，获取刚添加的元素再修改：

function todosGenerator(todosList) {
  todoListElem.innerHTML = ''

  todosList.forEach(function (todo) {
    // 先插入基础HTML
    todoListElem.insertAdjacentHTML('beforeend','<li class="completed well is"><label>'+todo.title+'</label><button class="btn btn-success" onclick="editTodo('+todo.id+')">Complete</button><button class="btn btn-danger" onclick="removeTodo('+todo.id+')">Delete</button></li>');
    
    // 获取刚插入的li（因为是beforeend插入，所以最后一个子元素就是它）
    const newLi = todoListElem.lastElementChild;
    // 获取里面的完成按钮
    const completeBtn = newLi.querySelector('.btn-success');

    // 根据状态修改类名和按钮文本
    if (todo.complete) {
      newLi.className = 'uncompleted well';
      completeBtn.textContent = 'UnComplete';
    }
  })
}

两种方式对比：方式1只需要一次DOM操作，性能更优；方式2逻辑拆分更直观，适合不想重构原有字符串的场景。

内容的提问来源于stack exchange，提问作者joyi61