Question

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

我对domConstruct创建与地方vs 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);
                  }

Answer 1

您可以直接使用dojo/domConstruct，

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

arg1：要创建的Dom元素
arg2：参数的json对象（创建elemnt的属性，也是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 2

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

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

Answer 3

虽然问题已得到解答，但为了在没有for循环的情况下推广解决方案，我将在此处发布：

＆＃13;

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

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<div id='errors'></div>

＆＃13;

在Dojo

3 个答案: