如何用Dojo在已有<div>中动态添加<p>元素？domConstruct方法解惑

别担心，这其实是对Dojo的domConstruct方法理解有点小偏差，咱们一步步来解决这个问题～

首先得明确一个核心误区：domConstruct.create绝对不是只能创建div元素，它可以生成任意你指定的HTML标签，这是解决问题的关键！先把几个核心方法的作用理清楚：

核心方法快速解析 #

• domConstruct.create(tag, attrs, refNode, position)：一步完成「创建指定标签的DOM元素 + 设置元素属性 + 插入到目标节点的指定位置」，是最直接高效的方式。
• domConstruct.place(node, refNode, position)：把已有的DOM节点（或者HTML字符串转成的节点）放到目标位置，适合复用节点的场景。
• domConstruct.toDom(htmlString)：把HTML字符串转换成DOM节点，之后可以搭配place方法插入。

具体实现方案（三种常用方式） #

假设你的现有div结构是这样的：

<div id="myTargetDiv">已有内容</div>

方式1：用create直接创建并插入（推荐，一步到位） #

这是最简洁的写法，完全不会生成多余的div：

require(["dojo/dom-construct", "dojo/dom"], function(domConstruct, dom) {
  // 获取目标div节点
  const targetDiv = dom.byId("myTargetDiv");
  
  // 创建<p>元素、设置内容/属性，直接插入到targetDiv内部末尾
  domConstruct.create("p", {
    innerHTML: "这是动态添加的段落",
    className: "dynamic-p" // 可选：给段落加个类名
  }, targetDiv, "last"); 
  // 第四个参数"last"表示插入到目标节点子元素的最后，还可以选"first"、"before"等
});

方式2：先转HTML字符串为DOM，再插入 #

如果你习惯用HTML字符串写内容，可以这么做：

require(["dojo/dom-construct", "dojo/dom"], function(domConstruct, dom) {
  const targetDiv = dom.byId("myTargetDiv");
  
  // 把HTML字符串转成DOM节点
  const pNode = domConstruct.toDom("<p>用HTML字符串生成的段落</p>");
  
  // 插入到目标div内部
  domConstruct.place(pNode, targetDiv, "last");
});

方式3：原生创建节点后用Dojo插入（不推荐，不如前两种简洁） #

require(["dojo/dom-construct", "dojo/dom"], function(domConstruct, dom) {
  const targetDiv = dom.byId("myTargetDiv");
  
  // 用原生JS创建p节点
  const pNode = document.createElement("p");
  pNode.textContent = "原生创建后用Dojo插入的段落";
  
  // 用Dojo的place方法插入到目标div
  domConstruct.place(pNode, targetDiv, "last");
});

关键注意点 #

• 调用create时，第一个参数直接写"p"就能创建段落元素，别再默认传div啦！
• 第四个参数position默认值就是"last"，如果只是想在div末尾加段落，这个参数可以省略。
• 确保已经正确引入了Dojo的dom-construct和dom模块，require语句不能写错。

这样就能顺利在现有div里动态添加p元素，完全不会产生多余的容器元素～

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