Creating and adding child elements in jQuery

Creating new elements

To create new HTML markup elements, you can use the jQuery function, passing it the code of the added markup as a parameter:

var newList=$('<ul><li>Item1</li><li>Item2</li></ul>');
console.log(newList.html());

Here we are simply creating a new element without adding it to the HTML markup of the web page yet.

clone method

An alternative way to create new elements is the clone. This method simply clones the markup of an already existing element:

var newList=$('ul').first().clone();
console.log(newList.html());

Adding elements

The very creation of elements would be useless if we could not add them to the structure of the web page. For adding, jQuery provides a couple of append/prepend methods.

append method

The method appendadds an element to the end of the selection element. It has the following use cases:

• append(‘html markup’): inserts the html markup specified in the parameter at the end of the selection element
• append(element): insert an element at the end of the selection element
• append(jQuery): inserting a jQuery object at the end of the selection element
• append(function): inserts the html markup string, html element, or jQuery object returned by the function at the end of the selection element

For example, we have the following list:

<ul id="langs">
    <li>Java</li>
    <li>C/C++</li>
    <li>PHP</li>
</ul>

Let’s use the append method:

  // insert line of code
    
    $('#langs').append('<li>C#</li>');
    
    // insert element
    var jsItem = document.createElement('li');
    jsItem.innerHTML='JavaScript';
    $('#langs').append(jsItem);
    
    //insert jQuery object
    var vbItem = $('<li>Visual Basic</li>');
    $('#langs').append(vbItem);
    

As a result, the final list will look like this:

<ul id="langs">
    <li>Java</li>
    <li>C/C++</li>
    <li>PHP</li>
    <li>C#</li>
    <li>JavaScript</li>
    <li>Visual Basic</li>
</ul>

Function usage:

$('ul#langs').append(function(index,html){
    return $('<li>JavaScript</li>');
});

The function is called for each element of the selection and takes two arguments: index- the index of the current selection element being iterated, and HTML- the markup of the current selected element. The output in this case is a jQuery object, although we can also return just a string of markup and an HTML element.

prepend method

The method prepend is similar to the append method, only it adds a new element to the beginning of the selection element. It has the following use cases:

• prepend(‘html markup’): inserts the html markup specified in the parameter at the beginning of the selection element
• prepend(element): insert an element at the beginning of the selection element
• prepend(jQuery): insert jQuery object at the beginning of the selection element
• prepend(function): inserts the html markup string, html element, or jQuery object returned by the function at the beginning of the selection element

Let’s use the append method:

 
// insert line of code
$('#langs').prepend('<li>C#</li>');

// insert element
var jsItem = document.createElement('li');
jsItem.innerHTML='JavaScript';
$('#langs').prepend(jsItem);

//insert jQuery object
var vbItem = $('<li>Visual Basic</li>');
$('#langs').prepend(vbItem);

Using a function will be the same as using it in a method append. And the result of the previous code will be the following markup:

As a result, the final list will look like this:

<ul id="langs">
    <li>Visual Basic</li>
    <li>JavaScript</li>
    <li>C#</li>
    <li>Java</li>
    <li>C/C++</li>
    <li>PHP</li>
</ul>

appendTo and prependTo methods

appendToThe and methods prependToadd objects as children to the element that is specified in the method parameter. For example, above we added elements to the list. Let’s partially rewrite the example using appendTo and prependTo:

// insert into jQuery object
$('<li>C#</li>').prependTo('#langs');

// insert into html element
var list = document.getElementById('langs');
$('<li>JavaScript</li>').appendTo(list);

appendToSo, the and methods prependTocan take either a jQuery object or an html element as parameters. In the first case, we first create a jQuery object from the markup ( $(‘

• C#

‘)) and then add it to the beginning of the element that has id=langs.

In the second case, we get the list element using the JavaScript method and then add html markup to the end of this element using the appendTo method.