This question already has answers here:
How to add a class to a given element?
(28 answers)
Closed 7 years ago.
Is there a way to add a second class to an HTML tag using javascript? For example, say you had the element <p class="a"> and you wanted to add class="b". If you used document.getElementByClassName("a").class = "b" that would remove class "a". Is there a way to have both in the same element?
document.getElementsByClassName("a")[0].className += " b"
First of all, the method is named getElementsByClassName, plural. You need to refer to a specific element in the collection that it returns, via a zero-based index.
And you need the space before b here, so that you don’t end up with ab, but a b.
Try this one here:
document.getElementByClassName("a").className += " b"
Got it from here: How do I add a class to a given element?
Related
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 2 years ago.
I dynamically created various images and other elements within various div elements and assigned a class to them, like:
divOM = document.getElementById('omain');
kd = document.createElement('img');
kd.src = 'pics/k0.jpg';
kd.class = 'mww';
divOM.appendChild(kd);
This works well – the debugger shows the desired result (# children with class ‘mww’). I have the (maybe naïve) hope that
wlist = document.getElementsByClassName('mww')
gives me all elements which have class=’mww’, but unfortunately it doesn’t. The debugger shows length:0 for wlist!?? Is it possible that document.getElementsByClassName doesn’t work for dynamically created elements?
Should be .className, not .class.
class is a reserved word in JavaScript.
Or use the Class List API:
kd.classList.add('mww');
This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;
You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.
You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I'm looking at three custom HTML attributes within an "a" tag and I'd like to extract their values into 3 separate javascript variables.
Here's the HTML with the attributes "data-event-category", "data-event-action", and "data-event-label":
'<a data-event-category="Billionaire" data-event-action="SeeMore" data-event-label="Biography" href="xxx" class="ga-track-click billionaires-individual-see-more gotham-medium red-txt">Contact us to see more Biography</a>'
And this is the function I cobbled together, unsuccessfully trying to extract the value of "data-event-category":
`function myFunction3() {
var z = document.getElementByClass(".ga-track-click").getAttribute("data-event-category");
return z;
}`
Here's my fiddle :
https://jsfiddle.net/comicosp/430350g0/#&togetherjs=tGRIiss2gB
Can you please tell me the** correct way to extract the values of the 3 custom HTML attributes**?
** DUPLICATE ISSUE**
I can see how :
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return? would be similar, but I'm not sure how it applies to my question. I'm very very beginner with javascript.
Change
getElementByClass
to
getElementByClassName
or use
querySelector
This question already has answers here:
How to find if div with specific id exists in jQuery?
(10 answers)
Closed 7 years ago.
I have some DIVs with IDs like 'abc_chosen', 'danger_chosen', etc.
I would like to delete all DIVs when their IDs contain the string '_chosen'.
How can I do that?
Try this:
$('div[id$="_chosen"]').remove();
$ here will check if _chosen is at the end of id.
Thanks to #evolutionxbox:
If you want to check if id contain _chosen anywhere(not at the end)
$('[id*="_chosen"]').remove();
Docs: https://api.jquery.com/attribute-ends-with-selector/
This question already has answers here:
Selecting second children of first div children in javascript [duplicate]
(6 answers)
Closed 8 years ago.
Which is better or what are the differences, when you want to select an nth child? Please note I do not want to use jQuery.
Well, you don't provide much information, but you've got two ways:
Let node be a DOM node:
node.childNodes[1]; //0 is the first child.
Another way...
node.querySelector(':nth-child(2)'); //in selectors, the first child has index 1.