Dojo in XPages – 10: Creating and Moving DOM Elements with dojo.create and

In the last post, we looked at changing the styles and classes of DOM elements dynamically with Dojo. In this post, I’ll show how you can move elements around on the page and insert new elements dynamically.

Both of these methods are available without including any additional dojo modules in XPages.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

Moving DOM Elements with

The method allows you to move an element to a new location on the page. When you call it, you define the element that will be moved, the element that it will be moved to, and define the relative position. ID/node, target ID/Node, relativePosition)

There are 6 options for the relative position: before, after, replace, only, first, last

before and after are pretty self-explanatory. replace will remove the target element and replace it with the element that is being moved.

The other three options are intended to be used when the target element has child elements. only removes all of the target element’s child nodes and makes the element being moved the only child of the target node. (only has the same effect as replace when targeting an element with no children.) first and last put the element to move as the first or last child of the target node, respectively.

Let’s look at some very simplistic examples.

I have a very simple page that has 3 divs that look like colored squares.

<div id="redDiv" style="height:100px; width:100px; background-color:#FF0000;"></div>
<div id="greenDiv" style="height:100px; width:100px; background-color:#00FF00;"></div>
<div id="blueDiv" style="height:100px; width:100px; background-color:#0000FF;"></div>

Here’s what it looks like by default:


This statement takes the red div and moves it after the blue div:'redDiv', 'blueDiv', 'after');


This statement takes the red div and moves it before the blue div:'redDiv', 'blueDiv', 'before');


This statement removes the blue div by replacing it with the red div:'redDiv', 'blueDiv', 'replace');


Now, let’s look at the other 3 options while dealing with a list, which has child list items. Here, I have two lists with 3 items each:

<ul id="list1">
  <li id="a1">a</li>
  <li id="b1">b</li>
  <li id="c1">c</li>

<ul id="list2">
  <li id="x2">x</li>
  <li id="y2">y</li>
  <li id="z2">z</li>


This statement takes list element a1 and makes it the last element in list2:'a1', 'list2', 'last');


This statement takes list element b1 and makes it the first element in list2:'b1', 'list2', 'first');


This statement takes list element c1 and makes it the only list item in list2, by removing all of the items currently in list2:'c1', 'list2', 'only');


Here’s what the page source now looks like. list1 has no items and list2 only has item c1.

<ul id="list1"></ul>
<ul id="list2">
  <li id="c1">c</li>

Creating an Element with

In addition to moving items, you can also use to create a simple DOM element and place it in a single step.

Starting with our original 3 colored div squares, this code will create a gray div square and place it after the green div.'<div style="height:100px; width:100px; background-color:#777777;"></div>', 'greenDiv', 'after');


Creating DOM Elements Dynamically with dojo.create()

If you need to add more complex DOM elements dynamically to your page, you can both create and place them with dojo.create().

Similarly to the last example, this code will create a gray div square (and add some text to it) and place it in a single statement.

This syntax, however, allows for cleaner syntax of DOM element creation if you have more than just a few properties to set.

  innerHTML: 'This div was created dynamically'

As mentioned in the last post, property names come from CSS property names, but properties that are hyphenated in CSS drop the hyphen and become camel case in dojo methods, which is why the background-color property is written as backgroundColor.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: