attach

Video tutorial illustrates the use of jQuery’s special type of variable called array.

Array variable stores multiple data with single name with different index. Indexing starts from zero in jQuery.
This helps in storing and retrieving easily using some conditional looping.

In this example, we take a unordered list with some list items which has two type of class veg and nonveg.
Another ordered list, with only 1 list item.
Two buttons. One to detach the items from unordered list, which has a class called veg.
Another button, to attach it to the ordered list.

HTML code
index.html

<html>
<head><title>Detach and Attach DOM Elements: jQuery Arrays!</title></head>
<body>
 
<ul>
<li class="veg">Rice</li>
<li class="nonveg">Fish</li>
<li class="nonveg">Chicken</li>
<li class="veg">Veg Pizza</li>
</ul>
 
<ol>
<li class="veg">Veg Paneer</li>
</ol>
 
<button id="remove">Remove</button>
<button id="attach">Attach</button>
 
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>

Here you have 1 unordered list. 1 Ordered list and 2 buttons.

jQuery code
my_script.js

$(document).ready( function() {
 
 $("#remove").click( function() {
   $store = $("ul li.veg").detach();
 });
 
 $("#attach").click( function() {
   $("ol li").after($store);
 });
 
});

Once the user clicks on the button with the id remove, we detach the list items with class veg from the unordered list and store it inside the special jQuery array variable.
Next, when the user clicks on the button with the id of attach, we attach it to the ordered list using append(), after(), before() methods of jQuery, by passing the array variable to these methods.

Video Tutorial: Detach and Attach DOM Elements: jQuery Array

[youtube https://www.youtube.com/watch?v=UHSrD8j5Czc]

YouTube Link: https://www.youtube.com/watch?v=UHSrD8j5Czc [Watch the Video In Full Screen.]

Unlike remove() method, detach() doesn’t delete the DOM structure or the HTML elements.

Note: You could even use the normal javascript arrays in jQuery too. We shall look at it in the future videos.

Video tutorial illustrating: attaching css stylesheet to XML document to give better appearance to it on the browser. In short: for presentation purpose.

To achieve this, we need to first create a stylesheet file, and attach it or associate our XML file with this stylesheet. We do it with the help of a processing instruction.

Processing Instruction

1	< ?xml-stylesheet type="text/css" href="Style.css" ?>

you can give absolute or relative path in href.

This tells the XML parser that the attached css file has to be referenced while rendering the XML file content.

Complete code
companyNames.xml

< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companyname>
  IBM, Oracle, Apple, Maestro, Microsoft ..
  <!-- Google, Yahoo! -->
</companyname>

Stylesheet code
Style.css

companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
}

This way we have separated the content and styling information and made it into two separate files.
Helps keep the XML and Design/CSS coding separate and we could hire separate teams to work on these things.

Video Tutorial: Attach CSS StyleSheet To XML Document

[youtube https://www.youtube.com/watch?v=7WH6dMI_cfE]

YouTube Link: https://www.youtube.com/watch?v=7WH6dMI_cfE [Watch the Video In Full Screen.]

Output on the browser:
IBM, Oracle, Apple, Maestro, Microsoft ..

Output will have red color with 18px size and with font-family of verdana.