我试图使用javascript创建一个待办事项列表，但无法附加所选选项

其目的是获取输入并创建单选按钮和动态标签，就像一个列表一样，选中该列表后，标签名称将从我们编写的输入文本字段中显示出来，并显示在底部。我可以用单选按钮，但不能用标签。请帮帮我，我是新来的

[小提琴]（）

//js
var j=0；
var textval=“”；
函数getInputValue（）{
//选择输入元素并获取其值
inputVal=document.getElementById（“txt”）.value；
//显示值
警报（输入值）；
}
函数add（）{
if（document.getElementById（'txt'）.value！=''）{
j++；
var title=document.getElementById（'txt'）.value；
var节点=document.createElement（'div'）；
node.innerHTML=''+标题+''；
document.getElementById（'done'）.appendChild（节点）；
}
}
输入=document.getElementById（“txt”）；
input.addEventListener（“键控”，函数（事件）{
如果（event.keyCode===13）{
document.getElementById（“btn”）。单击（）；
textval=this.value；
onfocus=this.value=''；
}
});
函数countChecked（事件）{
警报（textval）；
警惕（“芭蕾”）；
getInputValue（）；
$（this.parent（）.parent（）.append（this.append（'textvalh'）.append（“
”）；
}
$（“#容器”）。在（“单击”，“输入[type=checkbox]”，countChecked）；
函数getForm（事件）{
event.preventDefault（）；
var form=document.getElementById（“任务”）.value；
控制台日志（表格）；
}

您必须为

复选框及其
标签创建一个容器或父元素，以便对其进行更多控制

如果您想分隔选中的复选框，那么可以使用另一个div元素进行分隔

下面是一个示例，它基于您的代码：


//js
var j=0；
函数add（）{
if（document.getElementById（'txt'）.value！=''）{
j++；
var title=document.getElementById（'txt'）.value；
var节点=document.createElement（'div'）；
node.innerHTML=''+标题+''；
document.getElementById（'done'）.appendChild（节点）；
}
}
输入=document.getElementById（“txt”）；
input.addEventListener（“键控”，函数（事件）{
如果（event.keyCode===13）{
document.getElementById（“btn”）。单击（）；
textval=this.value；
这个。值=“”；
}
});
函数countChecked（事件）{
const isChecked=event.currentTarget.checked；
//获取最近元素的复选框的父级
const checkbox_parent=$（event.currentTarget）.closest（'div'）；
if（isChecked）//将元素移动到ID=selected的div
复选框_parent.appendTo（“#selected”）
else//将元素移动到ID=done的div
复选框_parent.appendTo（“#done”）
}
$（“#容器”）。在（'change'，'input[type=“checkbox”]”，countChecked）上
输入，输入：激活{
边界：无；
光标：指针；
大纲：无；
}
：-webkit输入占位符{/*Chrome/Opera/Safari*/
颜色：蓝色；
}
：-moz占位符{/*Firefox19+*/
颜色：蓝色；
}
：-ms输入占位符{/*IE 10+*/
颜色：蓝色；
}
：-moz占位符{/*Firefox 18-*/
颜色：蓝色；
}
钮扣{
显示：无；
}
.复选框回合{
宽度：1.3em；
高度：1.3em；
背景色：白色；
边界半径：50%；
垂直对齐：中间对齐；
边框：1px实心#ddd；
-webkit外观：无；
大纲：无；
光标：指针；
}
.复选框四舍五入：选中{
背景颜色：灰色；
}

添加
你能把你的问题说得更清楚吗？您的意思是必须将所有选定元素移到底部，并将非选定元素保留在顶部？

<div id = "container" >
  <div class="row">
  <div class="col-12">
  <input id = "txt" type = "text" placeholder="Add new.." >
  <button id="btn" value = "add" type = "button" onClick = "add()"  >
  </button>
  </div>
  <div id="done" class="col-12">
    
  </div>
  </div> <!-- row -->

<script>
  //js
  var j = 0;
  var textval="";
 function getInputValue(){
            // Selecting the input element and get its value 
            inputVal = document.getElementById("txt").value;
            
            // Displaying the value
            alert(inputVal);
        }

function add() {
  if (document.getElementById('txt').value != '') {
    j++;
    var title = document.getElementById('txt').value;
    var node = document.createElement('div');
    node.innerHTML = '<input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label>';
    document.getElementById('done').appendChild(node);
  }
}


input = document.getElementById("txt");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   document.getElementById("btn").click();
   textval =this.value;
   onfocus=this.value='';
  }
});


function countChecked(event) {
alert(textval);
alert("balle");
getInputValue();
$(this).parent().parent().append(this).append('<label>textvalh</label>').append('<br>');
}

$("#container").on( "click", "input[type=checkbox]", countChecked );

function getForm(event) {
  event.preventDefault();
  var form = document.getElementById("task").value;
  console.log(form);
}

</script>