我需要在JavaScript代码中添加复选框，但不能我该怎么做？

如何解决我需要在JavaScript代码中添加复选框，但不能我该怎么做？

我在JavaScript代码中添加复选框时遇到问题。

我想通过拖动元素来替换已选中和未选中的

我想在元素的开头添加一个复选框，并想将添加的元素添加到列表的开头

我希望所选的选项进入底部

我该怎么办？

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
        var div = this.parentElement;
        div.style.display = "none";
    }
}

var remove = document.querySelector('.draggable');
function dragStart(e) {
    this.style.opacity = '0.4';
    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html',this.innerHTML);
};

function dragEnter(e) {
    this.classList.add('over');
}

function dragLeave(e) {
    e.stopPropagation();
    this.classList.remove('over');
}

function dragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    return false;
}

function dragDrop(e) {
    if (dragSrcEl != this) {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
    }
    return false;
}

function dragEnd(e) {
    var listItens = document.querySelectorAll('.draggable');
    [].forEach.call(listItens,function(item) {
        item.classList.remove('over');
    });
    this.style.opacity = '1';
}

function addEventsDragAndDrop(el) {
    el.addEventListener('dragstart',dragStart,false);
    el.addEventListener('dragenter',dragEnter,false);
    el.addEventListener('dragover',dragOver,false);
    el.addEventListener('dragleave',dragLeave,false);
    el.addEventListener('drop',dragDrop,false);
    el.addEventListener('dragend',dragEnd,false);
}

var listItens = document.querySelectorAll('.draggable');
[].forEach.call(listItens,function(item) {
    addEventsDragAndDrop(item);
});

var list = document.querySelector('ul');
list.addEventListener('click',function(ev) {
    if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('checked');
    }
},false);



function newElement() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("Boş bırakılamaz!");
    } else {
        document.getElementById("myUL").appendChild(li);
    }
    document.getElementById("myInput").value = "";
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);
    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
    var attr = document.createAttribute('draggable');
    li.className = 'draggable';
    attr.value = 'true';
    li.setAttributeNode(attr);
    addEventsDragAndDrop(li);
}

body {
    margin: 0;
    min-width: 250px;
}

* {
    box-sizing: border-box;
    background-color: #292c30;
    color: white;
}

ul {
    list-style-type: none;
}

ul li {
    width: 51%;
    cursor: pointer;
    position: relative;
    padding: 15px 8px 12px 40px;
    list-style-type: none;
    font-size: 17px;
    font-style: normal;
    transition: 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul li.checked {
    border: #292c30 1px;
    line-break: auto;
    color: rgb(121,113,113);
    text-decoration: line-through;
    font-style: italic;
}

ul li.checked::before {
    content: '';
    position: absolute;
    border-color: rgb(121,113);
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

.close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    padding: 10px;
}

.header {
    padding: 25px 60px;
    color: rgb(121,113);
    text-align: left;
    font-style: normal;
}

.header:after {
    content: "";
    display: table;
    clear: both;
}

input {
    margin: 0;
    border: rgb(121,113);
    border-radius: 0;
    width: 30%;
    padding: 10px;
    float: left;
    font-size: 15px;
    font-style: normal;
}

.addBtn {
    padding: 10px;
    width: 15%;
    float: left;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 0;
}

<body>
    <div id="myDIV" class="header">
        <h2 style="margin:5px"></h2>
        <input type="text" id="myInput" font-style="italic" placeholder="Add new task.." style="border-block-end: solid 1px rgb(121,113);">
        <span onclick="newElement()" class="addBtn">+</span>
    </div>

    <ul id="myUL">
    </ul>
</body>