Javascript 如何在js中创建具有属性的元素？

我正试图在javascript中创建一个

audio

标记

我有以下几点

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

我想在html中显示的音频标记

<audio controls src='test.mp3' type='audio/mpeg'></audio>

---

我不知道如何在js中创建

控件
属性。有人能帮我吗？谢谢
 我熟悉用jQuery来做这件事。如果没有jQuery，我不知道该怎么做

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

var$el=$（“”{
班级：'音频'，
src:'test.mp3'，
键入：“音频/mpeg”，
控制：“控制在这里”
});
var html=$el[0].outerHTML；
现在就拿到了

 this.audioElement = createElement('audio', {className:'audio-asset', src:'test.mp3'});
 this.audioElement.setAttribute('controls',true);

启用控件

HTML

启用控件
禁用控件
检查控制状态

JS


myVid=document.getElementById（“audio1”）；
函数启用控件（）
{ 
myVid.controls=true；
myVid.load（）；
} 
函数禁用控件（）
{ 
myVid.controls=假；
myVid.load（）；
} 
函数checkControls（）
{ 
警报（myVid.controls）；
} 

对于布尔属性，如
multiple
和
disabled
，只需将它们设置为
true
，上面的答案似乎对我不起作用。以下是我所做的：

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

然后将
audioElement
附加到正文中：

document.body.appendChild(audioElement);

为此，您需要一个助手函数
createElement
，其工作原理如下：

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

    for (var prop in props) {
        $e.setAttribute(prop, props[prop]);
    }

    return $e;
}

现在您可以执行以下操作：

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

根据@megawac和James的回答，我认为对上的多个属性执行此操作的最干净的方法可能是使用Object.assign：

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

仍然不是一个函数调用的全部，但是可读性强，比这里的一些旧答案更详细。
我需要有controls属性。你的密码里没有+1.这是jQuery。。你有简单JavaScript的答案吗？不确定这和问题有什么关系。@putvande和否决票有什么关系？Op询问“我不知道如何在js中创建控件属性。有人能帮我吗？谢谢！”控件属性是您添加到标记
的属性，因此类似于
。
var createElement = function(type, props) {
    var $e = document.createElement(type);

    for (var prop in props) {
        $e.setAttribute(prop, props[prop]);
    }

    return $e;
}

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

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