How would I do a vanilla JS equivalent of querying multiple selectors with pseudoclasses?

user_9410179 0
Viewed 52

So I have this function:

function populate(selector, snippet, location) {
    var OGsnippet = $('snippet#' + snippet).children().clone().appendTo(selector);
}

It gets called like this: populate('section#main articles article:not(".ad")', 'socmed-articles'); or populate('section div.articles.news article:not(".ad")', 'socmed-articles');

I'm trying to convert it to vanilla javascript. I have tried:

function populate(selector, snippet, location) {
    var snippet = (document.querySelector('snippet#' + snippet).children)[0].cloneNode(true); //printing snippet yields a span with a class socmed-articles
    document.querySelector(selector).append(snippet);
}

But I get Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'section#main articles article:not(".ad")' is not a valid selector

jquery javascript
1 Answers

The CSS selector :not doesn't accept the ", they need to be removed to use that selector.

document.querySelector('section#main articles article:not(.ad)');
user_144811050
Related