使用JavaScript内联表单

时间:2013-05-15 21:07:37

标签: javascript

我的网页顶部有一组按钮。我正在编写一个函数,在单击时将表单放在最右边按钮的右侧。我使用以下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);

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

3 个答案:

答案 0 :(得分:3)

它将它放在底部,因为你将它附加到身体上。

如果您希望它出现在特定按钮之后,则需要:

  1. 获取该按钮
  2. 获取该按钮的parentNode
  3. 测试该按钮是否是其父级中的最后一个子级
  4. appendChild或insertBefore表单之前的那个父
  5. 如果您希望它与按钮内联显示,那么您还需要确保按钮显示为内联(以及新表单),并且没有其他任何会破坏布局(例如浮动) )。

答案 1 :(得分:1)

那是因为您要将表格附加到您的身体:document.getElementsByTagName('body')[0]。您需要在按钮之后添加以下内容:document.getElementById('my-buttons-container').appendChild(optionsForm);

希望这有帮助!

答案 2 :(得分:1)

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