Manipulating HTML DOM Elements with Mootools 1.2

Let’s take a look at manipulating HMTL elements. With Mootools 1.2. You can add new elements into an html page, remove elements, and change any style or element parameters, all on the fly.

The Basics Functions

.get();:

You can retrieve various properties of HTML objects in any web page pretty easily using get().

 
//this will return the html tag (div, a, span...) of the element with
//the id " spanid "
$('spanid ').get('tag');
<div id="wrap">
<p id="spanid">Paragrpah Tag</p>
</div>
 

You can use .get(); to retrieve more than just html tags. Here is a partial list of what can be retrieved using .get();:

• id
• name
• value
• href
• src
• class (will return all classes if the element has multiple)
• text (the text content of an element)

.set();:

Used for setting a value. When combined with events .set(); lets you change values after a page has loaded.

 
//this will set the value of # cmdTest to "I am the best"
$(' cmdTest ').set('value', ' I am the Best ');
<div id="wrap">
//the above code would change the href url to 
//http://www.google.com
<input type=”button” id=”cmdTest” name=”cmdTest” value=”I am Test” />
</div>
 

.erase();

Using .erase(); you can erase the value of any elements property on a webpage. Choose the element, and then choose which property needs to be erased.

 
//this will erase the href value of #id_name
$("cmdTest").erase('value');
<!-- Value of the button will remove -->
<input type="button" id="cmdTest" name="cmdTest" value="I am Test" />
</div>
 

.inject();

To move an existing element around the page, you can use .inject. It’s very easy to use and gives a lot of control over the user interface. To use .inject();, lets first set up a few elements within variables:

 
var id1 = $('div1');
var id2 = $('div2');
var id3 = $('div3');
var id4 = $('div4');
 

The above code places this html into variables, making it easy to manipulate with Mootools.

 
<div id="wrap">
<div id="div1"> This is div1</div>
<div id=" div2"> This is div2</div>
<div id=" div3"> This is div3</div>
<div id=" div4"> This is div4</div>
</div>
 

Now, to change the order of the elements, we can use .inject(); one of four ways.
We can inject to the:

• bottom (default)
• top
• before
• after

Bottom and top will place the injected element inside a selected element, in the top or bottom spot. Before and after on the other hand, will inject one element before or after another, but not inside the element referenced.

So, let’s change the order to A-C-B. Since we don’t need to inject an element inside another, we can use before or after.

 
//Interpreted as inject element C before element B
id4.inject(id3, 'before');
//Interpreted as inject element B after element C
id3.inject(id4, 'after');
 

Creating a New Element

new Element

You can use the new Element constructor to create a new html element. It’s very much like writing a regular html element, except we will adjust the syntax to make it play well with Mootools:

 
//first, you name a variable and declare a "new Element"
//then you define which type of element (div, a, span...)
var varElement = new Element('div', {
//here you set all the element parameters
'id': 'div1',
'text': 'Hello World',
'styles': {
//here you set all the style parameters
'width': '300px',
'height': '300px',
'background-color': '#ccc',
'float': 'left'
}
});
 

Now that you have an element, you can inject it somewhere with the code learned earlier. Let’s start with the following simple html:

 
<div id="wrap">
<!-- this element was injected to the inside-top -->
<div id="divSomeText">This is a dive with some text</div>
</div>
 

Now, lets turn #content_id into a variable:

var bodyWrapVar = $(‘wrap’);

Just like we learned before, we can inject the element we created into the current html:

 
//translates to, "inject newElementVar inside bodyWrapVar, in top 
//position
newElementVar.inject(bodyWrapVar , 'top');
 

The html would end up looking like:

 
<div id="wrap">
<!-- this element was injected to the inside-top -->
<div id="id_name">HelloWorld</div>
<div id="content_id">This is a div with some text </div>
</div>
 

• < Prev