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

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 dojo.place()

The dojo.place() 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.

dojo.place(element 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:

Dojo_10a

This statement takes the red div and moves it after the blue div:

dojo.place('redDiv', 'blueDiv', 'after');

Dojo_10b

This statement takes the red div and moves it before the blue div:

dojo.place('redDiv', 'blueDiv', 'before');

Dojo_10c

This statement removes the blue div by replacing it with the red div:

dojo.place('redDiv', 'blueDiv', 'replace');

Dojo_10d

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>

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

Dojo_10e

This statement takes list element a1 and makes it the last element in list2:

dojo.place('a1', 'list2', 'last');

Dojo_10f

This statement takes list element b1 and makes it the first element in list2:

dojo.place('b1', 'list2', 'first');

Dojo_10g

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

dojo.place('c1', 'list2', 'only');

Dojo_10h

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

Creating an Element with dojo.place()

In addition to moving items, you can also use dojo.place() 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.

dojo.place('<div style="height:100px; width:100px; background-color:#777777;"></div>', 'greenDiv', 'after');

Dojo_10i

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 dojo.place() 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.

dojo.create('div', 
  {
    style: 
      {
        backgroundColor:'#777777', 
        height:'100px', 
        width:'100px'
      },
  innerHTML: 'This div was created dynamically'
  },
  'greenDiv',
  'after'
)

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.

Dojo_10j

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: