更新：

Question

我正在尝试使用一个用于添加输入字段的按钮来创建HTML表单。我使用JQuery来选择我的对象（元素放在div中）。当我尝试使用append()或insertBefore()（不确定哪一个）时，我得到了

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

这是我的代码：

<form id = "userForm" action = "/" method = "POST">
      <div name = "userFunction">
        <input type = "radio" name = "function" value = "SUM"/>SUM<br/>
        <input type = "radio" name = "function" value = "AVERAGE"/>AVERAGE
      </div>
      <div name = "userArgs">

      </div>
      <script type="text/javascript">
        var numberFuncs = ["SUM", "AVERAGE"];
        var form = $("#userForm");
        var func = form.find("input[name='function']:checked").val();
        var userArgs = form.find("div[name='userArgs']");
        var spanEl = $("<span>Enter a number: </span>");
        var inputEl = $("<input name = 'arg' type = 'number'/>");
        userArgs.append(spanEl);
        userArgs.append(inputEl);
        var buttonEl = $("<button name = 'add' type = 'button' onclick = 'addArg()'>Add an argument field</button>");
        userArgs.append($("<br/>"));
        userArgs.append(buttonEl);
        function addArg(){
        var form = $("#userForm");
         var spanEl = $("<span>Enter a number: </span>");
         var inputEl = $("<input name = 'arg' type = 'number'/>");
         var userArgs = form.find("div[name='userArgs']");
         var buttonEl = userArgs.find($("button[name='add']"));
         console.log(buttonEl.text());
         $("br").insertBefore(buttonEl);
         spanEl.insertBefore(buttonEl);
         userArgs.insertBefore(buttonEl);

        }
      </script>
      <input type = "submit" value = "submit"/>
    </form>

请告诉我我做错了什么。谢谢！（正如你们中的一些人可能从代码中知道的那样，在解决这个问题之后，这应该是一个Flask应用程序）。

更新：

我知道问题是insertBefore()，因为我的console.log(buttonEl.text());正在运行（我的Google Chrome JS控制台的第一行是Add an argument field。此外，按钮消失了（不是提交，但是在点击它之后“添加一个参数字段”。

Answer 1

buttonE1是userArgs的孩子，当addArg()被调用时，您试图在userArgs之前插入buttonE1，所以您正试图在自己内部插入userArgs。

我认为您要插入inputEl元素，而不是userArgs元素。您还可以通过调用addArg()函数来减少冗余代码：

var form = $("#userForm");
var userArgs = form.find("div[name='userArgs']");
var $addBtn = $("<button name='add' type='button' onclick='addArg()'>Add an argument field</button>");
userArgs.append($addBtn);

function addArg() {
    $addBtn.before("<span>Enter a number: </span>"
        + "<input name='arg' type='number'/>"
        + "<br/>");
}

addArg();

更好：

var form = $("#userForm");
var userArgs = form.find("div[name='userArgs']");
var $addBtn = $("<button name='add' type='button'>Add an argument field</button>");
userArgs.append($addBtn);

$addBtn.click(function() {
    $addBtn.before("<span>Enter a number: </span>"
        + "<input name='arg' type='number'/>"
        + "<br/>");
}).click();

Answer 2

我猜你写错了

userArgs.insertBefore(buttonEl); //The problem comes from this line

您想要添加输入吗？

inputEl.insertBefore(buttonEl);

导致＆＃39; userArgs.insertBefore（buttonEl）;＆＃39;你尝试在buttonEl之前添加userArgs，但是buttonEl本身是里面的 userArgs，所以你试图嵌套userArgs（userArgs-Ception ...：D）

层次结构错误JQuery insertBefore（）

更新：

2 个答案: