无法在动态创建的div中插入动态p元素的问题排查

Hey，我帮你找到了问题根源，咱们一步步拆解：

核心错误原因 #

你这段代码里有个很容易犯的小失误：

var para = document.createAttribute("p");
modal_body.appendChild(para);

你想用createAttribute()来创建<p>元素，但这个方法是用来创建HTML属性节点的（比如class、id这类属性），不是用来创建元素标签的！这就导致你生成的不是<p>标签节点，而是一个名为p的属性节点，浏览器当然不允许把属性节点直接插到<div>里，所以才抛出了那个报错。

修复步骤 #

把创建<p>元素的代码替换成正确的createElement()方法就行，顺便可以给段落加些文本内容让效果更清晰：

// 替换原来错误的代码
var para = document.createElement("p");
para.textContent = "这里是动态生成的段落内容"; // 可选：添加段落文本
modal_body.appendChild(para);

另外还有两个小细节可以优化：

• 你重复用了closeButton变量名，虽然暂时不影响功能，但建议改成headerCloseButton和footerCloseButton，避免变量覆盖的潜在问题；
• 原来的代码把modal_footer直接加到了modal_lg上，按照Bootstrap模态框的结构规范，footer应该是modal_content的子元素，不然布局会错乱，我也一起帮你修正了这个问题。

完整可运行代码示例 #

HTML 结构 #

<div class="modal fade" id="destribution-details" role="dialog">
  <div class="modal-dialog modal-lg" id="modal-lg">
  </div>
</div>

JavaScript 代码 #

var modal_lg = document.getElementById("modal-lg");

// 构建模态框内容容器
var modal_content = document.createElement("div");
modal_content.className = "modal-content";
modal_lg.appendChild(modal_content);

// 构建模态框头部
var modal_header = document.createElement("div");
modal_header.className = "modal_header";
modal_content.appendChild(modal_header);

var headerCloseButton = document.createElement("button");
headerCloseButton.className = "close";
headerCloseButton.setAttribute("data-dismiss", "modal");
headerCloseButton.innerHTML = "×"; // 给关闭按钮添加叉号图标

var modal_title = document.createElement("h4");
modal_title.className = "modal-title";
modal_title.innerHTML = "Details 1";

modal_header.appendChild(headerCloseButton);
modal_header.appendChild(modal_title);

// 构建模态框主体（修复了p元素创建逻辑）
var modal_body = document.createElement("div");
modal_body.className = "modal-body";
modal_content.appendChild(modal_body);

var para = document.createElement("p");
para.textContent = "这是动态插入到模态框主体里的段落文本";
modal_body.appendChild(para);

// 构建模态框底部（修正了父容器）
var modal_footer = document.createElement("div");
modal_footer.className = "modal-footer";
modal_content.appendChild(modal_footer);

var footerCloseButton = document.createElement("button");
footerCloseButton.className = "btn btn-default";
footerCloseButton.setAttribute("data-dismiss", "modal");
footerCloseButton.innerHTML = "Close";

modal_footer.appendChild(footerCloseButton);

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