Javascript 如何使用Vanilla JS在HTML DOM中设置自定义属性值

预期输出：

这就是我得到的：

使用下面的代码

 /* creates a dom element
 * @param {string} type element type
 * @param {object} attr element attributes
 * @returns {node} html element
 */
function addElement(type, attr) {
    var el = document.createElement(type),
        val;
    for (val in attr) {
        if ({}.hasOwnProperty.call(attr, val)) {
            el[val] = attr[val];
        }
    }
    return el;
}

 spanWithCustomAttr = addElement('span', {
     setAttribute: ('customAttr', 'customAttrValue'),
     setAttribute: ('customAttr2', 'customAttrValue2')
 });

 appendChild(spanWithCustomAttr);

但当我尝试以下代码时：

spanWithCustomAttr = addElement('span', {
     dir: ('customAttr', 'customAttrValue')
 });

 appendChild(spanWithCustomAttr);

输出：

---

我不需要

dir

而是需要我的

customAttr

。如果有人能帮助我，那我就太棒了。

我试过这个方法，效果很好，我不知道你是不是这样问的

var data={tooltip:“hello”}；
函数加法器（类型，属性）{
var el=document.createElement（类型），
瓦尔；
for（属性中的val）{
if（属性hasOwnProperty（val））
el.setAttribute（val，attr[val]）；
}
返回el；
}
变量元素=加法元素（'span'{
工具提示：data.tooltip，
流动：“对”
});
element.innerText=“SPAN”；
document.body.appendChild（元素）
span{背景：红色；宽度：50px；显示：块；高度：20px}

测试
@4castle我使用的是Vanilla JS，为了进一步澄清，我更新了我的代码。