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');
Related
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Is there a spec that the id of elements should be made global variable?
(5 answers)
Closed 9 months ago.
While coding some js for a webpage, I had initially written a function to parse every div with an id and assign it to a variable for easy targeting:
var div={};
for (let e of Array.from(document.getElementsByTagName('div'))
.filter(div => div.id)) {
div[e.id] = e;
};
But while debugging I suddenly realized that js recognized all these divs "out of the box" and that I could call them directly. For example, if my HTML contains
<div id='status'>
<div id='modtime'></div>
<div id='client'></div>
</div>
Then I can simply do modtime.innerText='abc' – without having to assign modtime via something like div.modtime = document.getElementById('modtime')
Would like to know more about this 'functionality'; cannot find any documentation on it. Not sure what it's called.
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 2 years ago.
I have the following code snippet
$("#personalizacoesOpcionais")
.find(".qtdPersonalizacao")
.each(function (n, t) {
var i = {};
i.IdProdutoIngrediente = parseInt($(t).attr("data-id"));
i.Qtde = parseFloat($(t).text());
r[n] = i
});
In the html there are several divs personalizacoesOpcionais and each one with numerous elements qtdPersonalizacao.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
Ids are supposed to be unique within a document and jQuery will just returns the first matching element.
The recommended solution would be to use a class instead of an id for personalizacoesOpcionais.
If this is not possible, for example if you don't control the code that generate the markup, a workaround would be to use $("div[id=personalizacoesOpcionais]") instead of $("#personalizacoesOpcionais")
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 an answer here:
How to duplicate a div in JavaScript
(1 answer)
Closed 5 years ago.
What is a good equivalent for the jQuery .clone() function in regular DOM JavaScript? I performed multiple searches (on both SO and Bing) and didn't find a specific answer. I need to produce a copy of an element and all of its internal elements. The clone must have all of the elements and content of the source elements. If possible, make the solution as compact or efficient as possible.
try this
var clonedElement = document.getElementById('id').cloneNode(true)
var element= document.getElementById("myid");
var clone= element.cloneNode(true);
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?