Javascript document.body.appendChild（表单）复制页面底部的表单

我创建了一个表单来过滤表中的值。我作为一个孩子将一个表单附加到文档体，它正在复制表单。 表格的顶行是：

<form id="form" onSubmit={ (e) => this.handleSubmit(e) } autoComplete="off">

---

如何使表单停止自身复制？

您的问题的答案已经在您的代码中给出了：

// When the following two lines are ran the form is duplicated at the bottom of the document body
document.body.appendChild(form); // <--- this line adds "another" duplicate form to your HTML upon submitting it since it's in the handleSubmit function.

//运行以下两行时，表单将复制到文档正文的底部
document.body.appendChild（表单）；//
appendChild
不克隆元素；引用MDN：“如果给定的子节点是对文档中现有节点的引用，则appendChild（）会将其从当前位置移动到新位置（在将其附加到其他节点之前，不需要将该节点从其父节点移除）。这意味着一个节点不能同时位于文档的两个点中。因此，如果该节点已经有父节点，则首先删除该节点，然后将其追加到新位置。“-因此，这并不能真正解释为什么他们现在会有两个节点…嗯，您确定提供的是引用而不是空白/新表单元素吗？如果你删除那行，几乎肯定会停止复制。嗨。如果我将var form=document.getElementById（form）；在appendChild行上方，我收到错误消息：未能在“节点”上执行“appendChild”：参数1不是“节点”类型。如果我使用控制台日志表单，则得到null。如何解决这个问题？您需要转换
var form=document.getElementById（form）
to
var form=document.getElementById（'form'）（我在表单周围加了引号，所以它不再是变量用法，而是字符串）。或者
var form=document.getElementById（form.id）
也可以工作。我现在已经这样做了，它可以无限次地工作，但每次都会复制表单。构造函数（props）{super（props）；this.myRef=React.createRef（）；this.handleSubmit（e）}autoComplete=“off”>handleSubmit=（e）=>{event.preventDefault（）；const node=this.myRef.current；console.log（'node'，node）；document.body.appendChild（node）；this.props.ontriggerfiler（e）；}为什么不在react组件中呈现表单，而不是将表单附加到文档中？
onTriggerFilter = () => {
    // Ignore the lines upto the return statement
    var tags = this.state.filterData.tags;

    if(this.state.filterData.tag)
        tags.push(this.state.filterData.tag)

    var filterData = this.state.filterData;
        filterData.tags = tags;
        filterData.tag = '';
    // This returns an array of objects which are displayed in a table
    return this.getAssets(filterData).then(assets => {
        this.setState({
            assets: assets,
            filterData: filterData
        })
    });
}

// When the following two lines are ran the form is duplicated at the bottom of the document body
document.body.appendChild(form); // <--- this line adds "another" duplicate form to your HTML upon submitting it since it's in the handleSubmit function.