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

【问题标题】：Create <p> element inside existing div in Dojo在 Dojo 的现有 div 中创建 <p> 元素
【发布时间】：2018-04-25 14:14:24
【问题描述】：

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

我对 domConstruct create、place 和 toDom 方法感到困惑。我不想创建更多的 div，我只想在现有的 div 中放置一个段落元素。

我该怎么做呢？

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

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);
                  }

【问题讨论】：

标签： javascript dojo

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

可以直接使用dojo/domConstruct，

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

arg1 : 要创建的 Dom 元素
arg2 : json 参数对象（创建的元素的属性，也是innerHTML，id，类...）
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>

【讨论】：

【解决方案3】：

虽然已经回答了问题，但只是为了推广没有for循环的解决方案，我会在这里发布：

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>

【讨论】：