JS按钮在Chrome正常但IE11失效排查及文本框间距设置咨询

Hey，我来帮你搞定这个问题——你的代码在Chrome正常但IE11失效，还有文本框间距的需求，我一步步给你拆解：

一、IE11无法生成文本框的核心原因及修复 #

IE11对DOM元素的属性规范要求非常严格，你的代码里有个关键错误直接导致了失效：

newText.type = "input";

HTML里<input>的type属性有效值是text、button、checkbox这类，根本不存在input这个type值。Chrome浏览器有容错机制，会自动把错误的type="input"修正为type="text"，但IE11不支持这种容错，直接导致文本框无法渲染。

修复方案 #

把这一行改成符合标准的type值即可：

newText.type = "text";

如果要兼容更老旧的IE版本，也可以用setAttribute方法来设置属性：

newText.setAttribute('type', 'text');

二、为文本框设置间距的两种方法 #

想要让新增的文本框垂直排列且有间距，推荐以下两种方式：

1. 内联样式快速实现（适合简单场景） #

在创建容器newDiv后，直接给它添加底部外边距，让每一行之间保持间隔：

var newDiv = document.createElement('div');
newDiv.style.marginBottom = '12px'; // 可根据需求调整像素值

如果想给输入框和删除按钮之间也加横向间距，给文本框加右侧外边距即可：

newText.style.marginRight = '8px';

2. 使用CSS类（推荐，更易维护） #

先在页面的<style>标签里定义样式类：

.choice-row {
    margin-bottom: 12px;
}
.choice-input {
    margin-right: 8px;
}

然后在JS中给动态创建的元素添加类：

newDiv.classList.add('choice-row');
newText.classList.add('choice-input');

注：IE11原生支持classList.add，如果是更旧的IE版本，可以用newDiv.className += ' choice-row'（注意前面的空格，避免类名拼接错误）

完整修复后的JS代码 #

var counter = 0;
function addNew() {
    // 获取主容器
    var mainContainer = document.getElementById('mainContainer');
    // 创建每行的容器
    var newDiv = document.createElement('div');
    newDiv.style.marginBottom = '12px'; // 行间距

    // 创建文本输入框
    var newText = document.createElement('input');
    newText.type = "text"; // 修正type值
    newText.name = "choiceEntry";
    newText.style.height = '40px';
    newText.size = "100";
    newText.style.marginRight = '8px'; // 输入框与按钮的间距

    // 创建删除按钮
    var newDelButton = document.createElement('input');
    newDelButton.type = "button";
    newDelButton.value = "Delete";

    // 组装元素并添加到页面
    newDiv.appendChild(newText);
    newDiv.appendChild(newDelButton);
    mainContainer.appendChild(newDiv);
    counter++;

    // 删除按钮绑定事件
    newDelButton.onclick = function() {
        mainContainer.removeChild(newDiv);
    }
}

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