guys i want to add one class to li Element aftet it is created through insertAdjacentHTML but i dont know how i can select it in fact i replaced insertAdjacentHTML way with append that i commented appen way; my codes are:
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'
// } **/! ican not write these lines with 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>')
})
}
I think your commented code is better, but if you want to stick with the insertAdjacentHTML
, you can alter to something like this:
var liClass, cBtnInner;
if (todo.complete) {
liClass = 'uncompleted well';
cBtnInner = 'UnComplete';
} else {
liClass = 'completed well is';
cBtnInner = 'Complete';
}
todoListElem.insertAdjacentHTML(
'beforeend',
'<li class="' + liClass + '"><label>' + todo.title +
'</label><button class="btn btn-success" onclick="editTodo(' +
todo.id + ')">' + cBtnInner +
'</button><button class="btn btn-danger" onclick="removeTodo(' +
todo.id + ')">Delete</button></li>'
);