Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    setAttribute for multiple attributes question

    I have multiple attributes (class, id and title) that is needed to insert into a div together. All I know how to use setAttribute for single attribute. So the question is there an "array" setAttribute method to insert all attributes together into an element OR is there a "after" or "before" setAttribute method I can use to insert an attribute after or before other attribute?

    Thanks,

    DoubleJ

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Just use it as many times as you need to add as many attributes as you need.

    e.g.
    Code:
    obj.setAttribute('attr1','value1');
    obj.setAttribute('attr2','value2');
    obj.setAttribute('attr3','value3');
    …
    However, due to the issues surrounding setAttribute, class and className, it's generally safer (as well as quicker and better supported) to use DOM 0 syntax…

    e.g.
    Code:
    obj.className = 'className';
    obj.id = 'idValue';
    obj.title = 'titleValue';
    …

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by DoubleJ View Post
    So the question is there an "array" setAttribute method to insert all attributes together into an element?
    Thanks,DoubleJ

    There is now,though it uses an object, not an array, but if you preserve order when you construct an array of props, i'm sure you could convert it.

    here you go:
    Code:
    function setAttribs(elm, ob) {
        var r = [];
        var i = 0;
        for (var z in ob) {
            if (ob.hasOwnProperty(z)) {
         try{elm[z]=ob[z];} 
            catch(er){ elm.setAttribute( z, ob[z])}
          }
        }
    return elm;
    }
    
    
    //USAGE: 
    var dd=document.createElement("div")
    setAttribs(dd, {id: "eyeDee", className: "dynamo", title: 'titleValue 1'})
    
    alert(dd.outerHTML)   //example to show that attribs took effect (ie only)
    you could pass it an anon object like in the example, or (more powerfully) build some template objects, and pass those.
    for example:
    Code:
    var Dyno=function(h){
       this.innerHTML=h;
       this.style="width:"+(screen.width * 0.8)+"px; height: 120px";
       this.title="Dynamic Element Title";
       this.id="IDno"+ (Dyno.dynCount++);
    }//end Constructor Dyno
    
    Dyno.dynCount=0;
    
    var style1=new Dyno('Now is the time for <u>all</u> good men...')
    
    var dd=document.createElement("div")
    setAttribs(dd, style1)
    document.body.appendChild(dd)
    works for me. it tries the "DOM0", usually faster method, and if that fails (ex: setting 'style' in firefox) it falls back to the DOM1/2 setAttribute method. i just spent about 10 mins writing this, so i hope it helps you or someone else.

    Cheers!
    Last edited by rnd me; 07-19-2007 at 04:48 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •