CODEWITHSUNDEEP
javascriptdojo
user2447559
user2447559

Reputation: 3

How to insert a div before another div?

This my HTML code:

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

I want to add another div before and I am doing following in my 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");

But I am getting a TypeError: doc is undefined. I think I am not getting a flagId properly. What have I done wrong?

I then tried to use domConstruct.create instead of dojo.create as well, but it gave me error as undefined.

Upvotes: 0

Views: 920

Answers (3)

user1925121
user1925121

Reputation: 188

Which version of dojo are you using? I think this is the right thing you should do if you are using dojo 1.7 and above it's the dojo/ready module. And there is also dojo/domReady! which you could use if I'm not totally wrong.

Upvotes: 0

Craig Swing
Craig Swing

Reputation: 8162

dojo.query returns a NodeList, so when using that to try to add a new div, you get the exception that you see.

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

If you want to add the new node before the node, then use before, not first. first will add it to the child collection as the first element.

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

Upvotes: 1

gkaimakas
gkaimakas

Reputation: 582

First of all you should not place Javascript or CSS within the HTML code. It makes the code ureadable and unmaintanable (if that is a word). You should separete your files toy makes your life easier.

To place an element before another element you should use domConstruct, which apparently you did, but you have to call all function AFTER a page haw finished loading.

When you write javascript code and you just inject it in the HTML code sometimes the code loads way before the actual page and the element you are looking for. To solve this problem you can use dojo ready and from within call / register any other function.

Hope this helps

Upvotes: 0

Related Questions