Question

我有一个无序列表，我在其中附加列表项，在每个列表项中附加一个其他无序列表项，但后来的列表项我想附加两种类型的表单元素，它们也包含在父级中，但仅附加了表单在孩子无序的最后一个孩子中列出原因

我有解决方案，但是为什么下面的代码不起作用，我想知道请帮助

var reportform = () => {
    var form = document.createElement('FORM')
    var button = document.createElement('BUTTON')
    button.setAttribute('class', "report")
    var buttonText = document.createTextNode('Report')
    button.appendChild(buttonText)
    form.appendChild(button)

    return form
}

var deleteform = () => {
    var form = document.createElement('FORM');
    var input = document.createElement('INPUT')
    var div = document.createElement('div')
    input.setAttribute('placeholder', 'Enter a password')
    input.setAttribute('type', 'password')
    var button = document.createElement('BUTTON')
    button.setAttribute('class',"del")
    var buttonText = document.createTextNode('Delete')
    button.appendChild(buttonText)
    div.appendChild(input)
    div.appendChild(button)
    form.appendChild(div)

    return form
}


 var replyform = () => {
     var form = document.createElement('FORM');
     var div = document.createElement('div')
     var textArea = document.createElement('TEXTAREA')
     textArea.setAttribute('placeholder'," Quick Reply ")
     var input = document.createElement('INPUT')
     input.setAttribute('placeholder','Enter a password')
     input.setAttribute('type','password')
     var button = document.createElement('BUTTON')
     var buttonText = document.createTextNode('Reply')
     button.appendChild(buttonText)
     form.appendChild(textArea)
     div.appendChild(input)
     div.appendChild(button)
     form.appendChild(div)

     return form;
 }
    var threadList = (element) =>{
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () =>{
            if(xhr.readyState === 4 && xhr.status === 200){
                let response = JSON.parse(xhr.response)
                let form = replyform();
                var del = deleteform();
                var report = reportform();
                var list = document.getElementById('list')
                var node = document.createElement('LI');
                let text = document.createTextNode(element.Thread_text)
                let replylist = document.createElement('ul');
                replylist.setAttribute("class","u1")
                node.appendChild(text)
                node.appendChild(replylist)
                node.appendChild(form);
                node.appendChild(del)
                node.appendChild(report)
                // console.log(del)
                list.appendChild(node)
                response.forEach(ele => {

                    var nod = document.createElement('LI');
                    var text = ele.Reply_text || "No text"
                    var nodtext = document.createTextNode(text)
                    nod.appendChild(nodtext)

                    nod.appendChild(del)
                    nod.appendChild(report)
                    replylist.appendChild(nod) 
                })


            }
        }

        xhr.open('GET','/reply/replylist/' + element._id ,true)
        xhr.send();
        return;
    }
})

正如我之前提到的，我想在每个父级和子级无序列表中添加del and report form

Answer 1

当您调用appendChild()并且参数是DOM中已经存在的元素时，它不会复制该元素。相反，它将元素从其当前位置删除并将其放置在新位置。如果要在每个LI中使用删除表单和报告表单，则必须在循环中每次调用deleteform()和reportform()，而不仅仅是在循环前调用一次。

var threadList = (element) => {
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let response = JSON.parse(xhr.response)
      let form = replyform();
      var del = deleteform();
      var report = reportform();
      var list = document.getElementById('list')
      var node = document.createElement('LI');
      let text = document.createTextNode(element.Thread_text)
      let replylist = document.createElement('ul');
      replylist.setAttribute("class", "u1")
      node.appendChild(text)
      node.appendChild(replylist)
      node.appendChild(form);
      node.appendChild(del)
      node.appendChild(report)
      // console.log(del)
      list.appendChild(node)
      response.forEach(ele => {

        var nod = document.createElement('LI');
        var text = ele.Reply_text || "No text"
        var nodtext = document.createTextNode(text)
        var del = deleteform();
        var report = reportform();
        nod.appendChild(nodtext)

        nod.appendChild(del)
        nod.appendChild(report)
        replylist.appendChild(nod)
      })
    }
  }

  xhr.open('GET', '/reply/replylist/' + element._id, true)
  xhr.send();
  return;
}

appendChild无法正确添加节点

1 个答案: