动态创建的div的form-outline类未在页面正确渲染生效问题

问题原因 #

• MDB框架仅会在页面加载完成时自动初始化当前已存在的.form-outline元素，后续通过JS动态插入的同类元素不会自动触发初始化逻辑，因此样式不生效。
• 你生成的label未设置for属性和对应input的id关联，MDB初始化组件时找不到对应关联元素，所以抛出了读取style属性为null的报错。
• 代码中冗余的document.body.appendChild(input)语句会先将输入框挂载到body，后续再移动到div容器内，也可能干扰组件的初始化逻辑。

修复方案 #

替换你的JS代码为以下版本即可：

<script>
  // 计数器从2开始，和原有第一个输入框id序号对齐
  var inputIndex = 2;
  const addButton = document.querySelector("button");
  function newShareholder() {
    // 1. 创建外层form-outline容器
    const outlineWrap = document.createElement("div");
    outlineWrap.className = "form-outline mb-4";

    // 2. 创建input输入框
    const input = document.createElement("input");
    input.type = "text";
    input.id = "ownerName" + inputIndex;
    input.className = "form-control";

    // 3. 创建label标签，绑定for属性对应input的id
    const label = document.createElement("label");
    label.className = "form-label";
    label.setAttribute("for", "ownerName" + inputIndex);
    label.innerText = "Name of Owner(s)/Major Shareholders:";

    // 4. 组装DOM结构插入到按钮前
    outlineWrap.appendChild(input);
    outlineWrap.appendChild(label);
    addButton.parentElement.insertBefore(outlineWrap, addButton);

    // 5. 手动初始化MDB的Input组件，让form-outline样式生效
    new mdb.Input(outlineWrap);

    // 计数器自增
    inputIndex++;
  }
</script>

如果你使用的是MDB4版本，把上面的new mdb.Input(outlineWrap)替换为$(outlineWrap).formOutline()即可。

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