javascript - 有没有办法添加额外的独立字段，使它们不会成为预先存在的表单 (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

不。如果按钮在 HTML 标记中的表单内，它始终是表单的子级。您可以将此按钮放在表单之外并使用绝对或相对定位。但是，如果您只是想阻止在此按钮单击时提交表单，您可以在单击侦听器中添加“;return false”，或者通过 addEventListener 附加事件并在事件侦听器中使用事件对象的 preventDefault()。

Answer 2

如果您要在标签中插入任何标签（硬编码或动态插入），那么这些标签将根据 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;
}

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

希望这可以帮助。