层次结构错误JQuery insertBefore（）

我正在尝试制作一个带有按钮的HTML表单，用于添加输入字段。我使用JQuery选择我的对象，元素被放置在一个div中。当我尝试使用append或insertBefore时，我不确定是哪一个，我得到

未捕获的HierarchyRequestError:未能在“节点”上执行“insertBefore”：新的子元素包含父元素

这是我的代码：

<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.logbuttonEl.text；正在工作我的Google Chrome JS控制台的第一行是添加一个参数字段。另外，按钮不是在提交时消失，而是在我单击按钮后的添加参数字段消失。

buttonE1是userArgs的子项，当调用addArg时，您尝试在buttonE1之前插入userArgs，因此您尝试在其内部插入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();

---

我猜你打错了

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

是否要添加输入

inputEl.insertBefore(buttonEl);

---

执行“userArgs.insertBeforebuttonEl；”时的原因您尝试在buttonEl之前添加userArgs，但buttonEl本身在userArgs内部，因此您尝试嵌套userArgs userArgs异常…：D

看起来buttonE1是userArgs的子项，然后您尝试在buttonE1之前插入userArgs，因此您尝试在其内部插入userArgs。谢谢，我想我误解了insertBefore的本质。更感谢您的简短代码：P。您的代码使我的按钮完全消失，这更容易理解though@ytpillai-我想我应该用.before而不是insertBefore。我会相应地修改我的答案。啊。。这更有意义。谢谢我应该看到啊，现在是1点45分。我接受你的回答