如何显示div下的表单，具体取决于按下的按钮

Question

我需要根据我传递给创建表单的函数的外部ID，使用JavaScript在div下显示表单。

function reply(reply){
    var form = document.createElement('form');
    var textfield = document.createElement('textfield')
    var submit = document.createElement('input')
    form.setAttribute('action',"\"sendcomment("+ array[i].pk +")\"" )
    textfield.className = "commenttextfield"
    textfield.setAttribute('placeholder',"reply..." )
    submit.setAttribute('type',"submit" )
    submit.className="commentformsubmit"
    form.appendChild(textfield);
    form.appendChild(submit);
}

我有很多带有id的div，例如comment-id-X ，其中X是唯一数字.X的值作为回复传递给上面的函数。 所以我需要做一些像form.placeunder("comment-box-"+ reply)一样的form.placeunder("comment-box-"+ reply) 。 我试着做：

document.getElementById('comment-id-'+ reply).appendChild(form);

这会导致错误说：

TypeError: document.getElementById(...) is null.

是什么原因造成的？

另外，div具有可变的左边距样式属性，我希望表单也具有该属性。 那可能吗？

我需要附加的div是由javascript生成的，如下所示：

for(var i = 0; i < array.length; i++) {
    //setup list item
    var item = document.createElement('li');
    item.clasName = "commentlistelement"
    //setup parent div
    var maindiv = document.createElement('div')
    maindiv.setAttribute('id',"comment-id-" + array[i].pk);
    maindiv.className = "row comment";
    maindiv.setAttribute("style","padding-left: "+3*array[i].fields.indent+"vw;");
    //fill parent div (the reply button triggers the function above)
    maindiv.innerHTML = "<div class=\"col-md-1\">profile<br>pic</div><div class=\"col-md-9\"><small>username  </small><small><button class=\"buttonlink\" onclick=\"reply("+ array[i].pk +")\">reply</button></small><br><p>" + array[i].fields.description + "</p></div>"
    //append div to list item and list item to list
    item.appendChild(maindiv);
    list.appendChild(item);
}

Answer 1

这是我为您解决的问题的解决方案，但在此之前我想提一提
1-html中没有textfield元素（也许您将其误认为是textarea）
2-您必须重命名变量reply函数的reply，以便您的代码将机器人混淆它们

 function replyFn() { var form = document.createElement('form'); form.className = 'formcomment' var textarea = document.createElement('textarea') var submit = document.createElement('input') //form.setAttribute('action', "\\"sendcomment(" + array[i].pk + ")\\"") textarea.className = "commenttextfield" textarea.innerText = "reply..." submit.setAttribute('type', "submit") submit.className = "commentformsubmit" form.appendChild(textarea); form.appendChild(submit); return form; } function showForm(reply) { var form = replyFn(); document.getElementById('comment-id-' + reply).appendChild(replyFn()); alert(document.getElementsByClassName('formcomment').length) } 

 <input type="button" value="reply" onclick="showForm(1)"> <div id="comment-id-1" class="comment-id-1"></div>