有没有办法添加其他独立字段，使它们不会成为预先存在的表单 (DOM) 子项？

Question

有没有办法添加不会成为窗体子级的字段元素？例如：

<form name="form" id="form">
<input type="text" name="text">
*<button type="button" onclick="load()">Load options</button>*<-- Need not become a child
<select name="select">
<option value="1">Option</option>
</select>
<input type="submit" name="submit">
</form>

有没有办法防止按钮元素成为窗体"窗体"的子元素？

Answer 1

如果要在标记中插入任何标记（硬编码或动态插入），则这些标记将根据DOM层次结构自动标记为子节点。

按钮可以独立放置，而无需在表单中关联，以避免它成为表单的子节点。

<form name="form" id="form">
    <input type="text" name="text">
    <select name="select">
        <option value="1">Option</option>
    </select>
    <input type="submit" name="submit">
</form>
<button type="button" onclick="load()">Load options</button>

如果你想让按钮放在你的文本框旁边，那么你可以使用与你发布的代码相同的代码，只需稍作修改。

<form name="form" id="form">
    <input type="text" name="text">
    <button type="button" onclick="return load();">Load options</button>
    <select name="select">
        <option value="1">Option</option>
    </select>
    <input type="submit" name="submit">
</form>

现在，在javascript函数load（）的末尾添加return false。

function load(){
    /*Your Codes*/
    return false;
}

这将阻止按钮在点击后执行加载功能后处理您的表单。

希望这能有所帮助。

Answer 2

否。若按钮在HTML标记中位于表单内部，它将始终是表单的子项。您可以将此按钮置于表单之外，并使用绝对或相对定位。但如果您只是想在点击该按钮时阻止表单提交，您可以在点击监听器中添加"；return false"，或者通过addEventListener附加事件，并在事件监听器中使用事件对象的preventDefault（）。