Manipulate html dom elements through Mootools 1.2

We have learned how to select DOM elements, how to create arrays, how to create functions, and how to add events to elements. Today, let's take a deeper look at how to manipulate HTML elements. With MooTools 1.2, you can add new elements to an HTML page, delete elements, and change any style or element parameters.
Basic Method
. Get ();
This tool allows you to obtain the attributes of an element ). The attributes of an element are different parts of an HTML element, such as src, value, and name. The use of. get (); method is very simple:
Reference code:
Copy codeThe Code is as follows:
// The following line returns the html Tag Name (div, a, span…) of the element whose id is "id_name ......)
$ ('Id _ name'). get ('tag ');


Reference code:
Copy codeThe Code is as follows:
<Div id = "body_wrap">
<Span id = "id_name"> Element </span> <! -- The above Code will return "span" -->
</Div>

You can use the. get (); method to obtain more attributes, not just html tag names:
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)
Wait...
. Set ();
The. set (); method is the same as the. get (); method. Instead of getting a value, you can set a value. This method is useful when used together with events. You can use this method to change some attribute values after page loading.
Reference code:
// This sets the link address of the element whose id is id_name to http://www.google.com"
$ ('Id _ name'). set ('href ', 'HTTP: // www.google.com ');

Reference code:
Copy codeThe Code is as follows:
<Div id = "body_wrap">
<! -- The above Code will change the link address to "http://www.google.com" -->
<A id = "id_name" href = "http://www.yahoo.com"> Search Engine </a>
</Div>

. Erase ();
By using the. erase (); method, you can clear the attribute values of an element. It is similar to the previous two methods. Select an element, and then select the attribute you want to clear.
Reference code:
// Remove the href attribute of the element whose id is id_name.
$ ('Id _ name'). erase ('href ');

Reference code:
Copy codeThe Code is as follows:
<Div id = "body_wrap">
<! -- The above Code will clear the link address -->
<A href = "http://www.yahoo.com"> Search Engine </a>
</Div>


Move Element
. Inject ();
To move an existing element on the page, you can use the. inject (); method. Similar to other methods we see, it is also very simple to use and can give you more control permissions on your user interface. To use the. inject (); method, you must first set some element variables:
Reference code:
Copy codeThe Code is as follows:
Var elementA = $ ('elema ');
Var elementB = $ ('elemb ');
Var elementC = $ ('elemc ');

The code above assigns the following HTML to different variables respectively, which makes it easier to operate with MooTools.
Reference code:
Copy codeThe Code is as follows:
<Div id = "body_wrap">
<Div id = "elemA"> A </div>
<Div id = "elemB"> B </div>
<Div id = "elemC"> C </div>
</Div>

To change the order of these elements, we can use the. inject (); Method in four ways. We can inject elements:
Bottom (bottom, default)
Top)
Before)
After an element)
Bottom and top inject this element into the inner of a selected element, at the bottom or top of the element. In contrast, before and after inject an element to the top or bottom of another element, but not to the interior of the element.
Therefore, let's change the order of elements to A-C-B. Because we do not need to inject an element into another element, we can use before or after.
Reference code:
Copy codeThe Code is as follows:
// Put element C before Element B.
ElementC. inject (elementB, 'before ');
// Put Element B after element C
ElementB. inject (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, but you need to adjust the syntax to run properly in MooTools:
Reference code:
// First name a variable and declare a "new Element"
// Then define the element type (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. You can use the inject () method we just learned to place this element somewhere on the page. Let's start with the simple HTML below:
Reference code:
<Div id = "body_wrap">
<Div id = "content_id"> Some div content </div>
</Div>
Now, we convert the element whose ID is content_id into a variable:
Reference code:
Var bodyWrapVar = $ ('body _ wrap ');
Like what we just learned, we can inject the element we created into the current HTML:
Reference code:
// This sentence means: "inject newElementVar into bodyWrapVar and place it to the top"
NewElementVar. inject (bodyWrapVar, 'top ');
This code may eventually be like this:
Reference code:
<Div id = "body_wrap">
<! -- This element is injected to the internal top -->
<Div id = "id_name"> I am a new div </div>
<Div id = "content_id"> 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 codeThe Code is as follows:
<Div id = "body_wrap">
ID: <input id = "id_input" name = "id"/>
Text: <input id = "text_input" name = "text"/>
<Button id = "new_div"> Create a New div </button>
</Div>

Now, we use MooTools to write JavaScript so that this HTML form can insert a new element into your page. First, add an event to this button and write a function to include our code:
Reference code:
Copy codeThe Code is as follows:
Var newDiv = function (){
// We will put the code "Add a new element" here
};
Window. addEvent ('domainready', function (){
$ ('New _ div '). addEvent ('click', newDiv );
});

The next thing we need to do is to specify the variables we want to process. To use the data in the input form, we need to use. get (); method:
Reference code:
Copy 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 code above contain the values of the input form they specify. Because we need to obtain the value of the input box when you click "Create a New div", we need to put the above Code in the newDiv (); function. If we need to obtain this value outside this function, we need to get it during page loading, instead of clicking.
Reference code:
Copy codeThe Code is as follows:
Var newDiv = function (){
Var idValue = $ ('Id _ input'). get ('value ');
Var textValue = $ ('text _ input'). get ('value ');
};
Window. addEvent ('domainready', function (){
$ ('New _ div '). addEvent ('click', newDiv );
});

Next, we need to obtain the elements to be inserted into our new elements:
Reference code:
Copy codeThe Code is as follows:
Var newDiv = function (){
Var idValue = $ ('Id _ input'). get ('value ');
Var textValue = $ ('text _ input'). get ('value ');
Var bodyWrapVar = $ ('newelementiner iner ');
};
Window. addEvent ('domainready', function (){
$ ('New _ div '). addEvent ('click', newDiv );
});

Now that we have the value of our input form, we can create a new element:
Reference code:
Copy codeThe Code is as follows:
Var newDiv = function (){
Var idValue = $ ('Id _ input'). get ('value ');
Var textValue = $ ('text _ input'). get ('value ');
Var bodyWrapVar = $ ('newelementiner iner ');
Var newElementVar = new Element ('div ',{
// This sets the id of this element to the value of idValue.
'Id': idValue,
// This sets the text of this element to the value of textValue.
'Html': textValue
});
};
Window. addEvent ('domainready', function (){
$ ('New _ div '). addEvent ('click', newDiv );
});

The rest of our work is to insert this new element into our page:
Reference code:
Copy codeThe Code is as follows:
Var newDiv = function (){
Var bodyWrapVar = $ ('newelementiner iner ');
Var idValue = $ ('Id _ input'). get ('value ');
Var textValue = $ ('text _ input'). get ('value ');
Var newElementVar = new Element ('div ',{
'Id': idValue,
'Text': textValue
});
// The following sentence is: "insert newElementVar to the internal top of bodyWrapVar"
NewElementVar. inject (bodyWrapVar, 'top ');
};
Var removeDiv = function (){
// This will delete the internal html value (that is, everything in the div tag class)
$ ('Newelementiner iner '). erase ('html ');
}
Window. addEvent ('domainready', function (){
$ ('New _ div '). addEvent ('click', newDiv );
$ ('Remove _ div '). addEvent ('click', removeDiv );
});

Learn more...

Take some time to read the Elements Section in the MooTools documentation:

• The Element section contains most of the content we mentioned here, and there are many other contents.
• Element. style can give you more control over Element style attributes (some things will be explained in detail in future tutorials)
• Element. dimentions contains tools for processing location, coordinates, size, and other things.