在 Dojo 中的现有 div 中创建 <p> 元素

Question

我的 HTML 文档中已经存在一个 <div> 元素。我想使用 Dojo 向其中动态添加 <p> 元素。

我对 domConstruct create 与 place 与 toDom 方法感到困惑。我不想创建更多 divs，我只想在现有 div.

中放置一个段落元素

我该怎么做？

目前我有这个，但我假设它似乎没有用，因为 create 方法用于创建 divs 而不是其他类型的元素：

var errorPopup = dom.byId('error-dialog');
for (var i = 0; i < errorMessages.length; i++) {
                      var eMessage = domConstruct.create("<p>'"+errorMessages[i]+"'</p>");
                      errorPopup.appendChild(eMessage);
                  }

Answer 1

我仍然不完全确定为什么 create 方法不起作用（除非我最初的预感是正确的）但我让它与 place 方法一起工作。

for (var i = 0; i < errorMessages.length; i++) {
                      var eMessage = domConstruct.place("<p>'"+errorMessages[i]+"'</p>", "error-dialog");
                  }

Answer 2

可以直接使用dojo/domConstruct,

它有三个参数domConstruct.create(arg1,arg2,arg3)

arg1 : Dom 要创建的元素
arg2 : json 参数对象（创建的元素的属性，也是 innerHTML, id , class ...）
arg3 : 您创建的元素的 domNode 或 id 应该放在

require([ "dojo/dom-construct", "dojo/dom", "dojo/ready"], function(domConstruct, dom, ready) {
  ready(function() {
    for (i = 0; i < 5; i++) {
      var elment = domConstruct.create('p', {
                       'id': 'tooltipExample' + i,
                         'innerHTML': "Error number " + i
                        }, 
                   "error-dialog");
    }
  });
});

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />

<div id="error-dialog"></div>

Answer 3

虽然问题得到了回答，只是为了促进没有for循环的解决方案，我会post在这里：

const errors = [
  'Error 1',
  'Error 2',
  'Error 3'
]


require(['dojo/dom-construct'], function(dc) {
  function wrap(error) {
    return '<p>' + error + '</p>'
    //return `<p>${error}</p> also can be used
  }
  
  function place (el) {
    dc.place(el, 'errors')
  }
  
  errors
    .map(wrap)
    .forEach(place)
})

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<div id='errors'></div>

在 Dojo 中的现有 div 中创建 <p> 元素

Create <p> element inside existing div in Dojo

javascript

dojo