jQuery & DOM
Jakob Jenkov |
JQuery can read and manipulate the DOM of your HTML page using a set of simple methods. These methods are:
- text()
- html()
- val()
- attr()
- removeAttr()
- prepend()
- append()
- before()
- after()
- insertBefore()
- insertAfter()
- wrap()
- replaceWith()
- replaceAll()
- remove()
- empty()
- clone()
Each of these functions is described in the sections below.
text()
The text() method can read or write the text inside a given HTML element. Here is
an example:
var text = $('#theElement').text();
$('#theElement').text('New text for element.');
The text() method without parameters will return the text of the selected HTML element.
This is illustrated in the first line in the above example.
The text('new text') method which takes a string parameter will replace the existing
text of the HTML element, with the new, given text. If you insert HTML using the text()
element, the HTML will be escaped so it will appear as text. It will not be formatted as HTML.
html()
The html() method works much like the text() method, except the method
returns the HTML of a given element, not just the text. Here is an example:
var html = $('#theElement').html();
$('#theElement').html('New text for element.');
The html() method without parameters just returns the HTML of the selected element.
The body of the element, that is. The element's own HTML is not included.
The html('new HTML') method which takes a string parameter, sets the HTML
of the selected element. HTML will appear formatted just like HTML is otherwise.
val()
The val() method is used to get and set the value of form fields. Here is an example:
var theValue = $('#theFormField').val();
$('#theFormField').val('New value');
The val() method that does not take parameters will return the value of the selected
form field.
The val('new value') method that takes a string parameter will set the value of the
field, to the string passed as parameter.
attr()
The attr() function can read and write attributes of HTML elements. Here is a simple
example:
var attrValue = $('#theFormField').attr('height');
$('#theFormField').attr({height : attrValue });
Notice how the attr() method can take a JavaScript object as parameter.
The fields of this JavaScript object will be interpreted as the attributes to set on the
selected HTML element.
removeAttr()
The removeAttr() method is used to remove an attribute from an HTML element.
Here is an example:
$('#theFormField').removeAttr('height');
prepend()
The prepend() method inserts new HTML into the beginning of the selected HTML element.
The new HTML is concatenated with the HTML the element had already. Here is an example:
$('#theElement').prepend('New HTML...prepended');
append()
The append() method inserts new HTML into the end of the selected HTML element.
The new HTML is concatenated with the HTML the element had already. Here is an example:
$('#theElement').append('New HTML...appended');
before()
The before() method inserts HTML before the selected element (outside the element).
Here is an example:
$('#theElement').before('Inserted before');
after()
The after() method inserts HTML after the selected element (outside the element).
Here is an example:
$('#theElement').after('Inserted after');
insertBefore()
The insertBefore() method can move an HTML element from one place in the DOM to
another. More precisely, it moves the selected HTML element to just before the element selected
by the string parameter passed to insertBefore(). Here is an example:
$('#theElement').insertBefore('#anotherElement');
insertAfter()
The insertAfter() method can move an HTML element from one place in the DOM to
another. More precisely, it moves the selected HTML element to just after the element selected
by the string parameter passed to insertBefore(). Here is an example:
$('#theElement').insertAfter('#anotherElement');
wrap()
The wrap() method can wrap the selected HTML element in another HTML element.
Here is an example of how to use wrap():
$('#theElement').wrap('<div style="border: 1px solid black;"></div>');
This example wraps the selected element (with id theElement) in the given div element.
The div element is defined in the string parameter passed to the wrap() method.
replaceWith()
The replaceWith() method replaces the selected HTML element with a new one. The new HTML
element is passed as parameter to the replaceWith() method. Here is an example:
$('#theElement').replaceWith(
'<div style="border: 1px solid black;"></div>');
This example replaces the selected HTML element (with id theElement), with the div
element inside the string parameter passed to the replaceWith() method.
The replaceWith() method can also be used to replace a parent element, but keeping all of
its content. This is done by combining it with the html() method. Here is an example:
$('#theElement').replaceWith(
'<div style="border: 1px solid black;">' +
$('#theElement').html() +
'</div>');
Notice how the HTML inside the selected element is concatenated into the new element, inside the
call to replaceWith().
replaceAll()
The replaceAll() method works like the replaceWith() function, except that
it's syntax is kind of backwards. What that means is best explained via an example:
$('<div style="border: 1px solid black;"></div>')
.replaceAll('#theElement');
This example replaces the HTML element with id theElement, with the HTML element defined
inside the $() method.
remove()
The remove() method removes the selected HTML element from the DOM. Here is an example:
$('#theElement').remove();
empty()
The empty() method removes all child elements of the selected HTML element. Here is an example:
$('#theElement').empty();
clone()
The clone() method clones the selected element, so you can insert a copy of it somewhere
else in the DOM. Here is an example:
var clone = $('#theElement').clone();
clone.insertBefore('#anotherElement');
Cloning Event Handlers and Data
When you clone an element like the example did above, by default the elements event handlers and
data are not copied into the clone. By simply passing the value true to the clone()
method, you can make it copy event handlers and data too. Here is an example:
var clone = $('#theElement').clone(true);
clone.insertBefore('#anotherElement');
| Tweet | |
Jakob Jenkov | |
