在 Dojo 的父元素内创建元素

Create element inside of parent element in Dojo

本文关键字：元素 创建 Dojo      更新时间：2023-09-26

我可以在体内创建一个div，如下所示：

var n = dojo.create("div", { innerHTML: "<p>helloWorld</p>" }, dojo.body());

我想在我的父元素中创建一个div，如下所示：

<div id="parent"></div>

我已经试过了，但它似乎不起作用：

var n = dojo.create("div", { innerHTML: "<p>helloWorld</p>" }, dojo.query('#parent'));

如何在 DOM 中已经存在的父div中创建div？

您发布的解决方案是完全有效的。 几种选择：

无需查找 dom 节点，可以传入一个字符串(节点的 id(

require(["dojo/dom-construct"], function(domConstruct){
  var n = domConstruct.create("div", { innerHTML: "<p>helloWorld</p>" }, 'parent');
});

或者你可以构造节点，稍后使用 domConstruct#place 放置它：

require(["dojo/dom-construct"], function(domConstruct){
  var n = domConstruct.create("div", { innerHTML: "<p>helloWorld</p>" });
  domConstruct.place(n, 'parent');
});

domConstruct#place 也可以采用可选的 position 参数。 API 文档提供了更多信息

如果您需要针对类而不是元素 id，我发现以下方法有效且易于维护：

require([
  'dojo/query',
  'dojo/dom-construct'
  ], function(
    query,
    domConstruct,
  ){
  var parent = query('.someClass')[0];
  var child = domConstruct.create('div', { innerHTML: '<p>helloWorld</p>'});
  domConstruct.place(child, parent, 'position');
});

鉴于以 id 而不是类为目标总是更好的，但是当您依赖外部库时，这并不总是可行的。

我这样做的方式是这样的(我对任何其他解决方案持开放态度(：

// dojo 1.7+ (AMD)
require(["dojo/dom-construct"], function(domConstruct){
  var n = domConstruct.create("div", { innerHTML: "<p>helloWorld</p>" }, dojo.byId('parent'));
});
// dojo < 1.7
var n = dojo.create("div", { innerHTML: "<p>helloWorld</p>" }, dojo.byId('parent'));
相关文章：