How to create element with attribute in js?

For that to work you would need a helper function createElement that works somewhat like this:

var createElement = function(type, props) {
    var $e = document.createElement(type);

    for (var prop in props) {
        if(prop === "className") prop = "class";
        $e.setAttribute(prop, props[prop]);
    }

    return $e;
}

Now you can do:

this.audioElement = createElement('audio', {className:'audio', src:'test.mp3', type:'audio/mpeg', controls: true});

The answers above didn't seem to work for me. Here's what I did:

var audioElement;
audioElement = document.createElement('audio');
audioElement.setAttribute('controls', true);
audioElement.setAttribute('class', 'audio');
audioElement.setAttribute('src', 'test.mp3');
audioElement.setAttribute('type', 'audio/mpeg');

then appended audioElement to the body :

document.body.appendChild(audioElement);

Following on from @megawac and James's answers, I think the cleanest way to do this for multiple attributes on modern browsers is probably using Object.assign:

const colInput = document.createElement('input');
Object.assign(colInput,{
    type: 'number',
    min: 1,
    value: this.config.cols,
    onchange: this.updateSetting
});

Still not all in one function call, but readable and less verbose than some of the older answers here.

var audioElement = document.createElement('audio');

//your own code for setting the attributes you have already set

audioElement.controls=true;

for boolean attributes like multiple and disabled just set them to true.

I'm familiar with doing this with jQuery. I wouldn't know exactly how to do it without jQuery.

var $el = $('<audio>', {
    class: 'audio',
    src: 'test.mp3',
    type: 'audio/mpeg',
    controls: 'controls goes here'
});
var html = $el[0].outerHTML;

Enable controls

HTML

<button onclick="enableControls()" type="button">Enable controls</button>
<button onclick="disableControls()" type="button">Disable controls</button>
<button onclick="checkControls()" type="button">Check controls status</button>

JS

<script>
myVid=document.getElementById("audio1");
function enableControls()
  { 
  myVid.controls=true;
  myVid.load();
  } 
function disableControls()
  { 
  myVid.controls=false;
  myVid.load();
  } 
function checkControls()
  { 
  alert(myVid.controls);
  } 
</script>