用 JavaScript 内联表单答案

【问题标题】：Placing form inline with JavaScript用 JavaScript 内联表单
【发布时间】：2013-05-15 21:07:36
【问题描述】：

我有一个顶部有一组按钮的网页。我正在编写一个函数，以便在单击最右侧按钮时将表单放置在最右侧按钮的右侧。我正在使用以下 JavaScript 代码。

var optionsForm = document.createElement("form");
optionsForm.setAttribute('method',"post");
optionsForm.style.display = "inline";
MakeDropDown(optionsForm);  // Make drop-down list element
document.getElementsByTagName('body')[0].appendChild(optionsForm);

但是，它将表单/下拉列表放在页面底部，而不是放在顶部按钮的右侧。我宁愿不必使用绝对定位，因为我希望表单位于最右侧按钮的右侧，并且可能有不同数量的按钮。

【问题讨论】：

标签： javascript

【解决方案1】：

它将它放在底部，因为您将它附加到正文中。

如果您希望它出现在特定按钮之后，那么您需要：

得到那个按钮
获取该按钮的父节点
测试按钮是否是其父级中的最后一个子级
appendChild 或 insertBefore 表单到该父级

如果您希望它与按钮内联显示，那么您还需要确保按钮内联显示（以及新表单）并且没有其他东西会破坏布局（例如浮动)。

【讨论】：

【解决方案2】：

那是因为您将表单附加到您的正文中：document.getElementsByTagName('body')[0]。您需要在按钮之后附加它，例如：document.getElementById('my-buttons-container').appendChild(optionsForm);。

希望这会有所帮助！

【讨论】：

【解决方案3】：

您应该在这些按钮之后附加表单。为此，您需要获取这些按钮的 parentNode，并使用 buttonNode.insertBefore(buttonsParent, buttons) 看看这个：Javascript Append Child AFTER Element

【讨论】：