Question

这是我的HTML代码：

<div id="contextToolBar" class="dijitToolbar xwtContextualToolbar" wairole="menubar" role="menubar" widgetid="contextToolBar">

<table class="xwtContextualToolbarRibbonContainer" cellspacing="0" cellpadding="0" border="0" dojoattachpoint="_contextualToolbarTable">

<tbody class="xwtContextualToolbarRibbonContainerTB">
<tr class="xwtContextualToolbarRibbonContainerTR">
<td> </td>

<td class="xwtContextualToolbarRibbonContainerTD" vertical-align="top" cellspacing="0" cellpadding="0"> </td>

<td vertical-align="top">
***<div class="xwtQuickFilter" dojoattachpoint="quickFilterNode">***
</td>
</tr>
</tbody>
</table>
</div>

我想先添加另一个div，然后在我的JS中执行以下操作：

var flagId =dojo.query("#contextToolBar .xwtContextualToolbarRibbonContainer .xwtContextualToolbarRibbonContainerTB .xwtContextualToolbarRibbonContainerTB .xwtQuickFilter");

var n = dojo.create("div",  {
    id: "informationDialog", 
    dojoType: "dijit.form.Button", 
    iconClass: "xwtContextualIcon xwtContextualAddRow", 
    showLabel: "false", 
    onclick: "return showClusterInstallationDialog();"
}, flagId, "first");

但我得到TypeError: doc is undefined。我想我没有得到flagId。我做错了什么？

然后我尝试使用domConstruct.create代替dojo.create，但它给我的错误为undefined。

Answer 1

dojo.query会返回NodeList，因此当使用它来尝试添加新的div时，会出现您看到的异常。

var node;
dojo.query(
    "#contextToolBar .xwtContextualToolbarRibbonContainer .xwtContextualToolbarRibbonContainerTB .xwtContextualToolbarRibbonContainerTB .xwtQuickFilter")
    .forEach(function(n) { node = n; });

如果要在node之前添加新节点，请使用before，而不是first。 first会将它作为第一个元素添加到子集合中。

var newnode = dojo.create('div, {}, node, 'before');

Answer 2

首先，您不应将Javascript或CSS放在HTML代码中。它使代码难以理解且难以理解（如果这是一个单词）。你应该分开你的文件玩具让你的生活更轻松。

要在另一个元素之前放置一个元素，你应该使用domConstruct，这显然是你做的，但你必须在页面haw完成加载后调用所有函数。

当您编写javascript代码并且只是将其注入HTML代码时，有时代码会在实际页面和您要查找的元素之前加载。要解决此问题，您可以使用dojo ready并在调用/注册任何其他函数。

希望这有帮助

Answer 3

您使用的是哪个版本的道场？我认为this是你应该做的正确的事情，如果你使用dojo 1.7及以上它是dojo / ready模块。如果我没有完全错误的话，还可以使用dojo/domReady!。

如何在另一个div之前插入div？

3 个答案: