2

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

Improve this question
4
  • 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. Commented Sep 12, 2018 at 12:48
  • 3
    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.) Commented Sep 12, 2018 at 12:49
  • Possible duplicate of Creating a div element inside a div element in javascript (in a way....) Commented Sep 12, 2018 at 12:50
  • 2
    @FedericoklezCulloca I disagree. .add() doesn't add any elements to the DOM Commented Sep 12, 2018 at 12:51

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The closest equivalent I can think of would be to have an array of Element objects which you can push() to.
@RoryMcCrossan I would think so. I was just looking to see whether a NodeList could be used, but they're read-only.
There's a nice discussion about merging NodeLists: stackoverflow.com/questions/37552933/concat-two-nodelists You can't but there's alternatives.
How can you even instantiate a new NodeList()? Seems you cannot use it as a constructor.
@connexo I wasn't really suggesting to instantiate one, I was thinking of using querySelectorAll (per charlieftl's answer) 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.
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

Improve this answer

2 Comments

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 agree but don't see OP storing collection either in order to add to it later
2

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.