Add attribute in javascript

Question

How to write $('label.someClass').attr('valid', true);in Java Script without using jQuery?

Answer 1

Find all the elements labelusing getElementsByTagName, which gives an array of matching elements. Run a loop in this array and check if the class name exists and set the attribute using the method setAttribute.

if(document.getElementsByClassName){
}
else{
var labels = document.getElementsByTagName('label');
for(var i = 0;i<labels.length;i++){
    if(new RegExp("\\bsomeClass\\b", "g").test(labels[i].className)){
         labels[i].setAttribute('valid', true); 
    }
}

If the browser supports getElementsByClassName, we can use it conditionally.

if(document.getElementsByClassName){
    var elements = document.getElementsByClassName('someClass');
    for(var i = 0;i<elements.length;i++){
        ifelements[i].tagName.toLowerCase() == 'label'){
            elements[i].setAttribute('valid', true); 
    }
}
else{
    var labels = document.getElementsByTagName('label');
    for(var i = 0;i<labels.length;i++){
        if(new RegExp("\\bsomeClass\\b", "g").test(labels[i].className)){
            labels[i].setAttribute('valid', true); 
    }
}

Answer 2

Array.prototype.forEach.call(document.querySelectorAll('label.someClass'), function( label ) {
    label.setAttribute('someAttribute', 'someValue');
});

which means the browser is capable of ES5. An alternative for .querySelectorAllmay also be .getElementsByClassNamehere.

Answer 3

:

var labels = document.getElementsByTagName('label');
for(var i = 0;i<labels.length;i++){
    var classes = labels[i].className;
    if(classes && classes.match(/^(\s*|.*\s+)someClass(\s*|\s+.*)$/)){
         labels[i].setAttribute('valid', true); 
    }
}

Answer 4

document.getElementById("myimage").setAttribute("src","another.gif")

Answer 5

setAttribute() (doc).