Adding a child element using the .appendChild () method succeeds:

var divData = document.createElement('div'); $('.element-property__label').parent()[0].appendChild(divData);

Adding using the method .append ():

  var divData = document.createElement('div'); $('.element-property__label').parent()[0].append(divData);

returns an error

  Uncaught TypeError: $(...).parent(...)[0].append is not a function(…)
  • this is not a js method, it is a ie shell method or framework. Use other functions. For example parent.appendChild - nick_n_a
  • you still need to remove [0] , then the call will go to the jQuery object that has the append method - Grundy
  • @nick_n_a I'm using appendChild () learn.javascript.ru/… , which works successfully - while1pass
  • I repeat with a different wording. What would add to the current branch, take the parent of the current branch and add children there. Although as written by @Grundy will be more correct) - nick_n_a
  • @Grundy thanks, once again helping. but only have a question. Why when I execute $ ('. element-property__label'). parent () in my browser console returns a collection of one element? From these considerations, I took the zero element - while1pass

1 answer 1

When accessing a jQuery object by index, like so

 $('.element-property__label').parent()[0]

A specific HTMLElement will be received, not a jQuery object.

When you try to call the append method in it, in some browsers, for example IE, there will be an error saying that this method is missing.

In order to call the methods of the jQuery object, you do not need to get a specific element from the collection. All methods apply to all selected items.

Therefore, to use the jQuery.append method, it is enough just to remove the index access.

 $('.element-property__label').parent().append(divData);

in my browser console returns a collection of one item

And that's fine. The jQuery object interface is unified for working with the internal collection. Therefore, it does not matter how many elements are in the collection and whether they are at all.

  • "unified to work with the internal collection", that is, will it work with a potentially unlimited collection? individual work with an element of the collection is possible? or should we give unique classes or id so as not to inflate our collection? - while1pass
  • @ while1pass, honestly did not understand the question. I meant that all methods inside of themselves refer to the collection in which the selected elements are stored. That is, if there is one element in the collection - it is not necessary to choose it separately, the method will work both with one element and with several - Grundy
  • I asked with the slant that it suddenly turns out that the collection is of huge size, and this will slow down data processing. - while1pass
  • one
    @ while1pass, in order to apply a function to a specific element, it can be obtained as a jQuery object using the eq method. That is, in your example, it would be like this: $('.element-property__label').parent().eq(0).append(divData); - Grundy