Setting multiple attributes for an element at once with JavaScript

Question

How can I set multiple attributes at once with JavaScript  Unfortunately  I m not able to use a framework like jQuery on this project  Here is what I have now   var elem   document createElement  img     elem setAttribute  src    http   example com something jpeg    elem setAttribute  height    100     elem setAttribute  width    100

User · Answer

Or create a function that creates an element including attributes from parameters

function elemCreate(elType){
  var element = document.createElement(elType);
  if (arguments.length>1){
    var props = [].slice.call(arguments,1), key = props.shift();
    while (key){ 
      element.setAttribute(key,props.shift());
      key = props.shift();
    }
  }
  return element;
}
// usage
var img = elemCreate('img',
            'width','100',
            'height','100',
            'src','http://example.com/something.jpeg');

FYI: height/width='100%' would not work using attributes. For a height/width of 100% you need the elements style.height/style.width

User · Answer

use this function to create and set attributes at the same time  function createNode node  attributes       const el   document createElement node       for let key in attributes           el setAttribute key  attributes key              return el      use it like so  const input   createNode  input         name   test       type   text       placeholder   Test      document body appendChild input

User · Answer

I guess it s best way to set attributes at once for any element in this class   function SetAtt elements  attributes        for  var element   0  element  lt  elements length  element              for  var attribute   0  attribute  lt  attributes length  attribute    2                elements element  setAttribute attributes attribute   attributes attribute   1                      var Class   document getElementsByClassName  ClassName       class array list var Data     att1    val1    att2    val2    att3    val3      attributes array list SetAtt Class  Data

User · Answer

Try this  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      DEMO  HERE

User · Answer

const setAttributes    el  attrs    gt    Object entries attrs       forEach args   gt        el setAttribute    args

User · Answer

You could make a helper function   function setAttributes el  attrs      for var key in attrs        el setAttribute key  attrs key            Call it like this   setAttributes elem    src    http   example com something jpeg    height    100

User · Answer

you can simply add a method  setAttributes  with  quot s quot  at the end  to  quot Element quot  prototype like  Element prototype setAttributes   function obj     for var prop in obj        this setAttribute prop  obj prop          you can define it in one line  Element prototype setAttributes   function obj   for var prop in obj  this setAttribute prop  obj prop      and you can call it normally as you call the other methods  The attributes are given as an object  elem setAttributes   quot src quot    quot http   example com something jpeg quot    quot height quot    quot 100  quot    quot width quot    quot 100  quot     you can add an if statement to throw an error if the given argument is not an object

User · Answer

You might be able to use Object assign      to apply your properties to the created element  See comments for additional details   Keep in mind that height and width attributes are defined in pixels  not percents  You ll have to use CSS to make it fluid    x000D   x000D  var elem   document createElement  img   x000D  Object assign elem    x000D    className   my-image-class   x000D    src   https   dummyimage com 320x240 ccc fff jpg   x000D    height  120     pixels x000D    width  160     pixels x000D    onclick  function      x000D      alert  Clicked    x000D      x000D     x000D  document body appendChild elem  x000D   x000D     One-liner  x000D     document body appendChild Object assign document createElement               x000D   my-image-class   x000D    height  100   x000D    width  100   x000D    border  solid 5px transparent  x000D    box-sizing  border-box x000D    x000D   x000D   my-image-class hover   x000D    cursor  pointer  x000D    border-color  red x000D    x000D   x000D  body   margin 0   x000D   x000D   x000D

User · Answer

You could code an ES5 1 helper function   function setAttributes el  attrs        Object keys attrs  forEach key   gt  el setAttribute key  attrs key         Call it like this   setAttributes elem    src   http   example com something jpeg   height   100

User · Answer

If you wanted a framework-esq syntax  Note  IE 8  support only   you could extend the Element prototype and add your own setAttributes function   Element prototype setAttributes   function  attrs        for  var idx in attrs            if   idx      styles     idx      style    amp  amp  typeof attrs idx       object                 for  var prop in attrs idx   this style prop    attrs idx  prop              else if  idx      html                 this innerHTML   attrs idx             else               this setAttribute idx  attrs idx                         This lets you use syntax like this   var d   document createElement  div    d setAttributes        id   my div        class   my class        styles             backgroundColor   blue            color   red              html   lol        Try it  http   jsfiddle net ywrXX 1   If you don t like extending a host object  some are opposed  or need to support IE7-  just use it as a function  Note that setAttribute will not work for style in IE  or event handlers  you shouldn t anyway   The code above handles style  but not events   Documentation   Object prototypes on MDN - https   developer mozilla org en-US docs JavaScript Reference Global Objects Object prototype setAttribute on MDN - https   developer mozilla org en-US docs DOM element setAttribute

User · Answer

You can create a function that takes a variable number of arguments   function setAttributes elem    attribute  value pairs go here           for  var i   1  i  lt  arguments length  i  2            elem setAttribute arguments i   arguments i 1             setAttributes elem        src    http   example com something jpeg        height    100         width    100       Or  you pass the attribute value pairs in on an object    function setAttributes elem  obj         for  var prop in obj             if  obj hasOwnProperty prop                  elem prop    obj prop                         setAttributes elem        src   http   example com something jpeg       height   100        width   100           You could also make your own chainable object wrapper method   function    elem        return new    init elem          init   function elem        if  typeof elem      string             elem   document getElementById elem             this elem   elem        init prototype         set  function prop  value            this elem prop    value          return this                elem  set  src    http   example com something jpeg   set  height    100    set  width    100       Working example  http   jsfiddle net jfriend00 qncEz

[javascript] Setting multiple attributes for an element at once with JavaScript

Examples related to javascript