setAttribute not working

Question

I am making a plugin for form validation as practice, but for some reason after I create a h2 element and try to set it's attribute, it is not working. Here is the code

    var testing = function(regex, value, error_msg, error_msg_field_id){
        var pattern = new RegExp(regex);
        if (!pattern.test(value)){
            var ele = document.createElement("H2");
            var node = document.createTextNode(error_msg);
            ele.setAttribute('style', 'color:white');
            alert("hi");
            jQuery(error_msg_field_id).append(node);
        }
    }

the text appears with no problem, but it is not in white color. This make no sense at all to me

yea I tried that too, but didnt work, it doesnt even alert(hi) — user308553, Sep 23 '13 at 23:13
BTW, just a recommendation: use `console.log` instead of `alert` (unless you check your code in IE). — Roy Miloh, Sep 23 '13 at 23:15
@Ohgodwhy no it is firing, it only doesnt alert(hi) if i change it to `ele.style.color=white` — user308553, Sep 23 '13 at 23:17
@user308553 Where did you attach `ele`? you crated the element but didn't attach it to the document. — Roy Miloh, Sep 23 '13 at 23:19
@Roy thanks for the suggestion, it does sound more useful after reading about it, I always thought it is the same as alert — user308553, Sep 23 '13 at 23:20
@Roy omg... crap I am so sorry this is so embarassing, I missed that completely, I attached the node to the class instead. Thank you so much — user308553, Sep 23 '13 at 23:22
Why didn't you use `innerHTML` instead of `createTextNode` and `jQuery.append`? It's faster. — Robbie Wxyz, Sep 23 '13 at 23:22
@SuperScript, o seriously? I thought it is the same, Thanks!!! I will change it — user308553, Sep 23 '13 at 23:25
@SuperScript, in general, innerHtml is slower(e.g [here](http://stackoverflow.com/a/11854965/196489)) than creating and appending elements. And when you simply want to change text, `textContent` is an excellent alternative as you also remove any unwanted insertion of HTML. — Thorben Croisé, Sep 23 '13 at 23:31
@user308553, I re-checked on my own, and I was way wrong. `createTextNode` is _way_ faster than `innerHTML` or `textContent`! Thanks, @Tobo. Sorry for the misinformation. — Robbie Wxyz, Sep 23 '13 at 23:42

score 6 · Accepted Answer · answered Sep 23 '13 at 23:24

6

You are using setAttribute correctly, but you are setting the property on your h2-element, which is never actually inserted in your DOM.

You can change and simplify the relevant section of your code to:

var ele = document.createElement("H2");
ele.textContent = error_msg;
ele.setAttribute('style', 'color:white');
jQuery(error_msg_field_id).append(ele);

The usage of jQuery here is also not necessary. You can simply use

document.querySelector("#" + error_msg_field_id).appendChild(ele);

which is equally simple.

answered Sep 23 '13 at 23:24

Thorben Croisé

12,407
8
39
50

Hi, is there a advantage in using that instead of jQuery? – user308553 Sep 23 '13 at 23:40
3

1. You don't need jQuery ;) That means you could get around including a library of almost 100k. 2. Using native javascript is almost certainly faster than going through jQuery. 3. You can feel good, because you used native javascript for something that others turn to libraries. – Thorben Croisé Sep 23 '13 at 23:49
1

The only time you are in trouble is when using IE7 or below, as these don't know [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelector) – Thorben Croisé Sep 23 '13 at 23:52
1

Thanks!! this is why I love this site so much. So many great teachers – user308553 Sep 23 '13 at 23:54

setAttribute not working

1 Answers1