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
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:
Search WWH ::

Custom Search