JavaScript动态添加元素时，如何为Delete与Save按钮添加间距？

我做了个表单，点击“添加字段”按钮能动态生成文本输入框和Delete按钮，表单末尾是提交数据用的Save按钮。这次我用JavaScript函数生成这些元素，不是直接写HTML。现在遇到个问题：Delete按钮和Save按钮紧挨着，想给它们加间距，至少让Save按钮位于Delete按钮下方。

我的JavaScript函数代码如下：

function addField() {
       // 创建输入框
        const newInputField = document.createElement("input");
        newInputField.type = "text";
        newInputField.name = "field"
        newInputField.id = "field";

        // 创建删除按钮
        const minus = document.createElement("input");
        minus.type = "button"
        minus.name = "minus_button"
        minus.id = "minus_button"
        minus.setAttribute("onclick", "deleteField(this)");
        const minusText = document.createTextNode("-");
        minus.appendChild(minusText);

        // 添加元素到DOM
        sub_button = document.getElementById('submit')
        myForm.appendChild(minus)
        myForm.appendChild(newInputField);
        myForm.insertBefore(newInputField, sub_button);
        sub_button.style.margin = "10px";
        myForm.insertBefore(minus, sub_button);
}

我试过下面的代码，但完全没效果：

br = document.createElement("span");
br.innerHTML = "<br/>";
document.body.appendChild(br);
   
}

解决方法 #

方法1：直接插入换行元素 #

你之前的错误是把换行加到了document.body里，而不是表单内部的按钮之间。直接创建<br>元素，插入到Delete按钮和Save按钮之间就行：

function addField() {
       // 创建输入框
        const newInputField = document.createElement("input");
        newInputField.type = "text";
        newInputField.name = "field"
        newInputField.id = "field";

        // 创建删除按钮
        const minus = document.createElement("input");
        minus.type = "button"
        minus.name = "minus_button"
        minus.id = "minus_button"
        minus.setAttribute("onclick", "deleteField(this)");
        const minusText = document.createTextNode("-");
        minus.appendChild(minusText);

        // 创建换行元素
        const lineBreak = document.createElement("br");

        // 添加元素到DOM
        const sub_button = document.getElementById('submit')
        // 按顺序插入：输入框 → 删除按钮 → 换行 → 保存按钮
        myForm.insertBefore(newInputField, sub_button);
        myForm.insertBefore(minus, sub_button);
        myForm.insertBefore(lineBreak, sub_button);
}

方法2：用CSS控制间距（更灵活） #

比起硬加换行，用CSS的margin来控制间距更符合现代布局规范，还能调整具体距离：

function addField() {
       // ... 输入框和删除按钮的创建代码不变 ...

        // 给删除按钮加底部外边距
        minus.style.marginBottom = "10px";

        // 添加元素到DOM
        const sub_button = document.getElementById('submit')
        myForm.insertBefore(newInputField, sub_button);
        myForm.insertBefore(minus, sub_button);
}

如果不想把样式写在JS里，直接在CSS文件里加全局样式更干净：

#minus_button {
    margin-bottom: 10px;
}

方法3：用容器分组（推荐） #

把每个新增的输入框和删除按钮放到一个<div>容器里，<div>是块级元素，会自动换行，和后面的Save按钮自然分开。而且后续删除字段时，直接删掉整个容器就行，逻辑更清晰：

function addField() {
       // 创建输入框
        const newInputField = document.createElement("input");
        newInputField.type = "text";
        newInputField.name = "field"
        newInputField.id = "field";

        // 创建删除按钮
        const minus = document.createElement("input");
        minus.type = "button"
        minus.name = "minus_button"
        minus.id = "minus_button"
        minus.setAttribute("onclick", "deleteField(this)");
        const minusText = document.createTextNode("-");
        minus.appendChild(minusText);

        // 创建容器div，把输入框和删除按钮放进去
        const fieldContainer = document.createElement("div");
        fieldContainer.appendChild(newInputField);
        fieldContainer.appendChild(minus);

        // 添加容器到表单里，放在保存按钮前面
        const sub_button = document.getElementById('submit')
        myForm.insertBefore(fieldContainer, sub_button);
}

内容的提问来源于stack exchange，提问作者cheznead