What is the equivalent javascript function for .add() in jquery?

Question

For example for the given jquery snippet, what should be the equivalent javascript. An equivalent add method in javascript can be helpful.

$("h1").add("span").add("h2");

As it clearly is mentioned in the jquery docs - .add() does not add any DOM element. https://api.jquery.com/add/ So using, .appendChild() does not serve the purpose here

I assume that you are looking for `appendChild` method, please when asking a question first try to search for it's answer for little bit and than post it, beacuse this the answer for this is like on the first page of google. — Християн Христов, Sep 12 '18 at 12:48
Well what `.add()` does is extend the contents of the jQuery object; it does not affect anything else. There really is no equivalent because of that. (Note also that jQuery is itself of course JavaScript code.) — Pointy, Sep 12 '18 at 12:49
Possible duplicate of [Creating a div element inside a div element in javascript](https://stackoverflow.com/questions/12622465/creating-a-div-element-inside-a-div-element-in-javascript) (in a way....) — Federico klez Culloca, Sep 12 '18 at 12:50
@FedericoklezCulloca I disagree. .add() doesn't add any elements to the DOM — ADyson, Sep 12 '18 at 12:51

score 5 · Answer 1 · answered Sep 12 '18 at 12:54

5

The documentation at https://api.jquery.com/add says

"Given a jQuery object that represents a set of DOM elements, the .add() method constructs a new jQuery object from the union of those elements and the ones passed into the method. ".

This method doesn't perform any DOM operations, it's purely something for use to manipulate a jQuery object. So as far as I can see there would be no direct equivalent - if you don't use jQuery then by definition you can't create or manpiulate a jQuery object.

P.S. You can always examine the jQuery source code for the method to see what it does.

answered Sep 12 '18 at 12:54

ADyson

57,178
14
51
63

3

The closest equivalent I can think of would be to have an array of Element objects which you can `push()` to. – Rory McCrossan Sep 12 '18 at 12:55
1

@RoryMcCrossan I would think so. I was just looking to see whether a NodeList could be used, but they're read-only. – ADyson Sep 12 '18 at 12:56
2

There's a nice discussion about merging NodeLists: https://stackoverflow.com/questions/37552933/concat-two-nodelists You can't but there's alternatives. – lampyridae Sep 12 '18 at 13:00
How can you even instantiate a new `NodeList()`? Seems you cannot use it as a constructor. – connexo Sep 12 '18 at 15:09
@connexo I wasn't really suggesting to instantiate one, I was thinking of using querySelectorAll (per [charlieftl's answer](https://stackoverflow.com/a/52295773/5947043)) but then being able to add more things to it afterwards as freely as you can with jQuery .add(). Since NodeLists are read-only, you can't do the adding to it later part. – ADyson Sep 12 '18 at 15:11

charlietfl · Answer 2 · 2018-09-12T13:14:02.923

3

That would create a collection of all <h1>, <span> and <h2> in page

A collection of those same elements using vanilla js would be:

document.querySelectorAll('h1, span, h2')

My guess is you expect add() to do something different than this but without more details about your use case this would do what is shown in the question

edited Sep 12 '18 at 13:14

answered Sep 12 '18 at 12:56

charlietfl

170,828
13
121
150

I guess that works until you want to add more things to it later (because NodeLists are read-only) - which is what .add() does. But upvoted because I think this approach is worth mentioning if it serves the OP's purpose. – ADyson Sep 12 '18 at 13:00
@ADyson agree but don't see OP storing collection either in order to add to it later – charlietfl Sep 12 '18 at 13:04

score 2 · Answer 3 · answered Sep 12 '18 at 13:04

Using the native DOM API only you'd have to do a little more:

let collection = [];

let h1 = document.querySelectorAll("h1")
let span = document.querySelectorAll("span")
let h2 = document.querySelectorAll("h2")

collection.push([...h1]);
collection.push([...span]);
collection.push([...h2]);

console.dir(collection);

<h1>Headline 1</h1>

<p>THis will not end up in the collection (except <span>this</span>)</p>

<h2>Headline 2</h2>

<span>This closes it out.</span>

What is the equivalent javascript function for .add() in jquery?

3 Answers3