jQuery how to: create and insert a new element (part 2)

In our last post, we have a discussion about creating and inserting new elements with jQuery (JavaScript) Append method. We have learned how to create and add new elements to the body document.

In its basic form, the Append method adds the new element as the last child element or (technically) before the closing tag of the specified element. In certain cases, however, we have the new item at a specific point added. In this post we will tackle this problem.

Recommended reading: jQuery: create and insert a new element - part I

To illustrate, we have prepared the following HTML unordered list structure with the ID list.

• UT enim ad minim veniam.
• Lorem ipsum dolor sit amet, consectetur adipisicing elit.
• DUIs Aute Irure dolor in Reprehenderit.
• Sunt in culpa qui officia Deserunt Mollit.
• Excepteur Sint occaecat cupidatat non proident.

In this first example we create a new item and set it as the first child of a specified member (parent). As in our previous post we first look at how it is done purely with JavaScript and jQuery.

The following example is that we create a new

and then add it as the first child of the

. You create a new item, as well as the text inside, like so.

Var li = document.createElement (li), txt = document.createTextNode ("this is the text of the new element.'");li.appendChild(txt);

If want to add this element as the first child element, we can the JavaScript function .insertBefore(). This allows us an item before the insert function an existing item.

Now, we must specify the parent to the new item in boxes. In this example, we specify element by one the ID attribute as follows:

UL = document.getElementById('list');

Then, we must define, which element to the "new element" place above. In our case, it would be the first child of the parent element. In JavaScript we can the first child element .firstChild function, and we store it in a variable named FirstChild.

Var FirstChild-= ul.firstChild;

We then make the function. We start the parent UL variable, followed by .insertBefore() function, like so.

ul.insertBefore();

Within the parentheses, we give the new item, followed by the reference element (the first child element of its parent).

ul.insertBefore (li, FirstChild);

This code will insert the new li before the first child element above. If we consider a look and the element with the developer tool on the browser, we get this result:



We see that our new item is now the first child of the

.

Alternatively we can use jQuery. jQuery has a feature called .prepend(). Write it in this a way we can achieve the same result.

$('#list').prepend (')
• This is the text of the new element. (with jQuery)
');

Adding now, how about the new item at a specific point, such as before or after the 3rd child - in contrast to the first and last. Here is how we do it in JavaScript and jQuery.

We have created a new element from the previous example, like so:

Var li = document.createElement (li), txt = document.createTextNode ("this is the text of the new element.'");li.appendChild(txt);

We need to access the list item. In JavaScript we use .getElementsByTagName() select element by its tag name.

Var list = document.getElementsByTagName('li');

Then we have the 3rd to get list element, which can be specified with the index number. The index number in JavaScript started from 0, the 3 item 2 in the index would be. The following code we store this item in NthList variable.

Var NthList = list [2];

.InsertBefore()-Funktion, we can now add the new item before the 3rd child of the specified item:

ul.insertBefore (li, NthList);

When we display the browser, we get:



To add the new element to it, together we can. nextSibling(), .insertBefore()-Funktion returns the next element.

ul.insertBefore (li, nthList.nextSibling);

In contrast to the previous example, the new item is paste the following code after the 3rd child of the specified element.



jQuery introduced to simplify .before(), and .after()-Funktion, the process. And we can jQuery-.eq()-Funktion to the target element to their index.

With reference to our example above, we can do with the same thing:

$('li').eq (2) ...in ('This is the text of the new element.) (with jQuery)

');

Add the new item before the third child of the specified element. Or we can write it this way add a after it.

$('li').eq (2) ...nach ('This is the text of the new element.) (with jQuery)');

We have learned how to create and insert new elements with JavaScript and jQuery functions used to simplify the process (achieve the same result). It is up to your choice to find out that your case is more efficient.

Hopefully Paticularly can get useful for you started this session for those who just with jQuery or JavaScript. You have some questions, please not it in the comment section to.

Below a few useful resources on this topic continue to dig.

Graphic & Web Designer; approximately 2 years, works as a freelance designer been specializing in e-commerce for individual action. He shares his enthusiasts are contacted in Web design at the creatiface.com and on Twitter @creatiface

View the original article here