We have learned how to select DOM elements, how to create arrays, how to create functions, and how to add events to elements. Today we will learn in-depth if HTML elements are manipulated. With MooTools 1.2, you can add new elements to an HTML page, delete elements, and change any style or element parameters, which are very easy.
Basic Methods
.get();
This tool allows you to obtain the properties of an element. The attributes of an element are various different parts that make up an HTML element, such as src, value, name, etc. Using .get(); method is very simple:
Reference code:
// The following line will return the html tag name of the element with id "id_name" (div, a, span...)
$('id_name').get('tag');
Reference code:
<div >
<span >Element</span> <!-- The above code will return "span" -->
</div>
You can use the .get(); method to get more properties, not just html tagnames:
id
name
value
href
src
class (If there are multiple CSS class names, all CSS class names will be returned)
text (text content of an element)
etc…
.set();
The .set(); method is the same as the .get(); method, but instead of getting a value, it sets a value. It is more useful when used in conjunction with events. Through this method, you can change some attribute values after the page is loaded.
Reference code:
// This will set the link address of the element with id to id_name to ""
$('id_name').set('href', '');
Reference code:
<div >
<!-- The above code will change the link address to "" -->
<a href="">Search Engine</a>
</div>
.erase();
Through the .erase(); method, you can clear the attribute value of an element. It is similar to the previous two methods. Select the element and select the attribute you want to clear.
Reference code:
// This says to remove the href attribute of the element with id id_name
$('id_name').erase('href');
Reference code:
<div >
<!-- The above code will clear the link address -->
<a href="">Search Engine</a>
</div>
Move elements
.inject();
To move an already existing element on the page, you can use the .inject(); method. Similar to other methods we have seen, it is also very simple to use and can give you more control in your user interface. To use the .inject(); method, first set some variables containing elements:
Reference code:
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
The above code assigns the following HTML to different variables respectively, so it will be easier to operate with MooTools.
Reference code:
<div >
<div >A</div>
<div >B</div>
<div >C</div>
</div>
Now, to change the order of these elements, we can use the .inject(); method in four ways. We can inject elements into:
Bottom (bottom, default)
Top (top)
Before an element (before)
After an element (after)
bottom and top will inject this element into the inside of a selected element, at the bottom or top of the element. Relatively, before and after will inject one element into the top or bottom of another element, but not into the inside of the element.
So let's change the order of elements to A-C-B. Since we don't need to inject one element into the inside of another element, we can use before or after.
Reference code:
// The following sentence means: put element C before element B
(elementB, 'before');
// The following sentence means: put element B after element C
(elementC, 'after');
Create a new element
new Element
You can use the "new Element" constructor to create an HTML element of a row. This is very similar to writing a normal HTML element, except that you need to adjust the syntax to be able to run normally under MooTools:
Reference code:
// First name a variable and declare a "new Element"
// Then define the type of the element (div, a, span...)
var newElementVar = new Element('div', {
// Set all attributes of the element here
'id': 'id_name',
'text': 'I am a new div',
'styles': {
// Set all style parameters of the element here
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
Now you have an element, and you can place this element somewhere on the page through the inject(); method we just learned. Let's start with the following simple HTML:
Reference code:
<div >
<div >Some div content</div>
</div>
Now, we convert the element with ID content_id into a variable:
Reference code:
var bodyWrapVar = $('body_wrap');
As we just learned, we can inject this element we created into the current HTML:
Reference code:
// This sentence means: "Inject newElementVar into bodyWrapVar inside and place it on top"
(bodyWrapVar , 'top');
This code may end up like this:
Reference code:
<div >
<!-- This element is injected into the inner top -->
<div >I am a new div</div>
<div >Some div content</div>
</div>
Example
For this example, we create a form that allows you to add a row element to your HTML page. First, create some text boxes and buttons.
Reference code:
<div >
ID: <input name="id" />
text: <input name="text" />
<button>Create a new div</button>
</div>
Now, let's write JavaScript using MooTools to enable this HTML form to insert a new element into your page. First, we add an event to this button and write a function to include our code:
Reference code:
var newDiv = function() {
// We will put the "Add a New Element" code here
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
The next thing we have to do is specify the variables we want to deal with. To use the data in the input form, we need to use the .get(); method:
Reference code:
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
Now, the variables idValue and textValue in the above code contain the values of the input form they specify. Since we need to get the value of the input box when the user clicks the "Create a new div" button, we need to put the above code in the newDiv(); function. If we need to get this value outside this function, we need to get it when the page is loaded, not when clicked.
Reference code:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
Next, we need to obtain the element we want to insert into:
Reference code:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
We already have the value of our input form, and now we can create a new element:
Reference code:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
var newElementVar = new Element('div', {
// This will set the id of this element to the value of idValue
'id': idValue,
// This will set the text of this element to the value of textValue
'html': textValue
});
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
All we have to do is insert this new element into our page:
Reference code:
var newDiv = function() {
var bodyWrapVar = $('newElementContainer');
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var newElementVar = new Element('div', {
'id': idValue,
'text': textValue
});
// The following sentence says: "Insert newElementVar to the inner top of bodyWrapVar"
(bodyWrapVar, 'top');
};
var removeDiv = function() {
// This will delete the internal html value (that is everything in the div tag class)
$('newElementContainer').erase('html');
}
('domready', function() {
$('new_div').addEvent('click', newDiv);
$('remove_div').addEvent('click', removeDiv);
});
Basic Methods
.get();
This tool allows you to obtain the properties of an element. The attributes of an element are various different parts that make up an HTML element, such as src, value, name, etc. Using .get(); method is very simple:
Reference code:
Copy the codeThe code is as follows:
// The following line will return the html tag name of the element with id "id_name" (div, a, span...)
$('id_name').get('tag');
Reference code:
Copy the codeThe code is as follows:
<div >
<span >Element</span> <!-- The above code will return "span" -->
</div>
You can use the .get(); method to get more properties, not just html tagnames:
id
name
value
href
src
class (If there are multiple CSS class names, all CSS class names will be returned)
text (text content of an element)
etc…
.set();
The .set(); method is the same as the .get(); method, but instead of getting a value, it sets a value. It is more useful when used in conjunction with events. Through this method, you can change some attribute values after the page is loaded.
Reference code:
// This will set the link address of the element with id to id_name to ""
$('id_name').set('href', '');
Reference code:
Copy the codeThe code is as follows:
<div >
<!-- The above code will change the link address to "" -->
<a href="">Search Engine</a>
</div>
.erase();
Through the .erase(); method, you can clear the attribute value of an element. It is similar to the previous two methods. Select the element and select the attribute you want to clear.
Reference code:
// This says to remove the href attribute of the element with id id_name
$('id_name').erase('href');
Reference code:
Copy the codeThe code is as follows:
<div >
<!-- The above code will clear the link address -->
<a href="">Search Engine</a>
</div>
Move elements
.inject();
To move an already existing element on the page, you can use the .inject(); method. Similar to other methods we have seen, it is also very simple to use and can give you more control in your user interface. To use the .inject(); method, first set some variables containing elements:
Reference code:
Copy the codeThe code is as follows:
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
The above code assigns the following HTML to different variables respectively, so it will be easier to operate with MooTools.
Reference code:
Copy the codeThe code is as follows:
<div >
<div >A</div>
<div >B</div>
<div >C</div>
</div>
Now, to change the order of these elements, we can use the .inject(); method in four ways. We can inject elements into:
Bottom (bottom, default)
Top (top)
Before an element (before)
After an element (after)
bottom and top will inject this element into the inside of a selected element, at the bottom or top of the element. Relatively, before and after will inject one element into the top or bottom of another element, but not into the inside of the element.
So let's change the order of elements to A-C-B. Since we don't need to inject one element into the inside of another element, we can use before or after.
Reference code:
Copy the codeThe code is as follows:
// The following sentence means: put element C before element B
(elementB, 'before');
// The following sentence means: put element B after element C
(elementC, 'after');
Create a new element
new Element
You can use the "new Element" constructor to create an HTML element of a row. This is very similar to writing a normal HTML element, except that you need to adjust the syntax to be able to run normally under MooTools:
Reference code:
// First name a variable and declare a "new Element"
// Then define the type of the element (div, a, span...)
var newElementVar = new Element('div', {
// Set all attributes of the element here
'id': 'id_name',
'text': 'I am a new div',
'styles': {
// Set all style parameters of the element here
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
Now you have an element, and you can place this element somewhere on the page through the inject(); method we just learned. Let's start with the following simple HTML:
Reference code:
<div >
<div >Some div content</div>
</div>
Now, we convert the element with ID content_id into a variable:
Reference code:
var bodyWrapVar = $('body_wrap');
As we just learned, we can inject this element we created into the current HTML:
Reference code:
// This sentence means: "Inject newElementVar into bodyWrapVar inside and place it on top"
(bodyWrapVar , 'top');
This code may end up like this:
Reference code:
<div >
<!-- This element is injected into the inner top -->
<div >I am a new div</div>
<div >Some div content</div>
</div>
Example
For this example, we create a form that allows you to add a row element to your HTML page. First, create some text boxes and buttons.
Reference code:
Copy the codeThe code is as follows:
<div >
ID: <input name="id" />
text: <input name="text" />
<button>Create a new div</button>
</div>
Now, let's write JavaScript using MooTools to enable this HTML form to insert a new element into your page. First, we add an event to this button and write a function to include our code:
Reference code:
Copy the codeThe code is as follows:
var newDiv = function() {
// We will put the "Add a New Element" code here
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
The next thing we have to do is specify the variables we want to deal with. To use the data in the input form, we need to use the .get(); method:
Reference code:
Copy the codeThe code is as follows:
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
Now, the variables idValue and textValue in the above code contain the values of the input form they specify. Since we need to get the value of the input box when the user clicks the "Create a new div" button, we need to put the above code in the newDiv(); function. If we need to get this value outside this function, we need to get it when the page is loaded, not when clicked.
Reference code:
Copy the codeThe code is as follows:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
Next, we need to obtain the element we want to insert into:
Reference code:
Copy the codeThe code is as follows:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
We already have the value of our input form, and now we can create a new element:
Reference code:
Copy the codeThe code is as follows:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
var newElementVar = new Element('div', {
// This will set the id of this element to the value of idValue
'id': idValue,
// This will set the text of this element to the value of textValue
'html': textValue
});
};
('domready', function() {
$('new_div').addEvent('click', newDiv);
});
All we have to do is insert this new element into our page:
Reference code:
Copy the codeThe code is as follows:
var newDiv = function() {
var bodyWrapVar = $('newElementContainer');
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var newElementVar = new Element('div', {
'id': idValue,
'text': textValue
});
// The following sentence says: "Insert newElementVar to the inner top of bodyWrapVar"
(bodyWrapVar, 'top');
};
var removeDiv = function() {
// This will delete the internal html value (that is everything in the div tag class)
$('newElementContainer').erase('html');
}
('domready', function() {
$('new_div').addEvent('click', newDiv);
$('remove_div').addEvent('click', removeDiv);
});
More learning...
Be sure to spend some time reading this section of Elements in the MooTools documentation:
- ElementThis section contains most of the content we talk about here, and many other contents
- You can give you more control over element style attributes (some things we will explain in depth in future tutorials)
- Includes tools to handle location, coordinates, sizes and other things