HTML and CSS Reference
In-Depth Information
and we can also find their labels as follows:
> $('[required="required"]').prev('label')
The file tasks.css also contains a class called
required
that is defined as follows:
.required {
color: red;
}
In order to append the * to the
label
, we will include the * inside a
span
, and include that
span
within the
label
. This ensures it is separated from the label itself. We can dynamically
append the
span
to the
label
as follows:
> $('[required="required"]').prev('label').append( '<span>*</span>')
If you execute this you will notice a * appear at the end of two of the labels on screen.
This is not quite the finished result, we still need to add the appropriate class to the new
span
s; so refresh the screen to remove these changes.
You may have noticed that the result of the call above was the labels that had been modified
(rather than the
span
s that were appended to them). We therefore need to select the child
span
s to these elements, and add the
required
class to them:
> $('[required="required"]').prev('label').append( '<span>*</span>').children( 'span').addClass('required')
Again, we have managed to achieve the entire operation in a single line through the use of
chaining.
An important aspect to understand is that these changes have updated the Document Object
Model in real time. In order to see this, highlight one of the red *, and choose “Inspect
Element” from the right click menu (this is a shortcut to finding a specific element in the
“Elements” tab of the developer tools). You will see the following:
Many of jQuery's manipulation functions can be utilized to insert new content either before
or after existing content.
Append
is used to insert content inside a specific element, but
other examples include:
