以动态创建的形式添加和删除输入元素

Question

我有一个“消息”页面，可以在每条消息上发表评论。 我正在做一个类似Facebook的文本区域，当您集中精力时，它会显示“提交”按钮，而当您模糊处理时，它将再次隐藏它。 到目前为止，我已经尝试了一些不同的方法：

<script type="text/javascript">
function focusTextarea(id) {
        var form = document.forms[id];

       //Create an input type dynamically.
        var element = document.createElement("input");

        //Assign different attributes to the element.
        element.setAttribute("type", "submit");0
        element.setAttribute("value", "Post comment");
        element.setAttribute("name", "createComment");
        element.setAttribute("class", "okButton");
        element.setAttribute("id", "test");

        var foo = document.getElementById("commentButton");

        //Append the element in page (in span).
        form.appendChild(element);

}

function unFocusTextarea(id) {
    var test = document.getElementById(id);

    var foo = document.getElementById("commentButton");
    var foo2 = document.getElementById("test");

    foo.removeChild(foo2);
}
</script>

参数id是表单名称和id。 在第一个功能中，我想查找表单并插入一个提交按钮。 第二个功能是我想再次查找表单并删除按钮。

提前致谢

Answer 1

对于您想做的事情，您不应该创建和删除对象，只需使用CSS隐藏对象即可。 .style.display DOM元素及其所有子元素隐藏起来， .style.display DOM元素的.style.display属性设置为"none" ，而如果要显示它们，则将其设置为"" 。

至于您当前的代码，我认为document.forms并没有您认为的那样。 表单不是范围，它是DOM元素，最好像其他任何形式一样引用它： document.getElementById("formid") 。

Answer 2

我看不到你想指出什么

document.getElementById("commentButton");

但是，这应该是一种简单的方法：

function unFocusTextarea(id) {
var form = document.getElementById(id);
if(form.lastChild.name=="createComment")form.removeChild(form.lastChild)
}

由于按钮（如果存在）始终是表单的lastChild，因此仅查看此lastChild并检查名称属性是否与给定值（createComment）匹配。 如果是这样，该按钮将被删除。

Answer 3

最终改为使用jquery：

function focusTextarea(id) {
    if($("#"+id+" #comment_"+id).val() == "Write a comment..") {
        $("#"+id+" #comment_"+id).val("");
        $("#"+id+" #commentTools_"+id).append("<input type='checkbox' name='createPrivate' value='1'> <span class='normal'>Private</span><br><input type='submit' name='createSubmit' value='Post comment' class='okButton'>");
        $("#"+id+" #comment_"+id).rows = 5;
    }
}

function unFocusTextarea(id) {
    if($("#"+id+" #comment_"+id).val() == "Write a comment.." || $("#"+id+" #comment_"+id).val() == "") {
        $("#"+id+" #commentTools_"+id).empty();
        $("#"+id+" #comment_"+id).val("Write a comment..");
    }
}

不管怎么说，还是要谢谢你 ：）