求问下面这个 createDocumentFragment() 方法是否正确

Question

由于不太会用 createDocumentFragment 这个方法，希望大家帮忙看看用法是否正确，或者别的有没有什么影响性能的

let _smilies = _root.el.querySelector('.smilies-body');
let _ul, _li = '';
let fragment = document.createDocumentFragment();

Object.keys(smiliesData).forEach((y, i) => {
    _ul = document.createElement("ul");
    _ul.setAttribute('class', 'smilies-items smilies-items-biaoqing')
    _ul.setAttribute('data-id', i)
    smiliesData[y].split('|').forEach(e => {
        _ul.innerHTML += `<li class="smilies-item"><img src="https://cdn.dode.top/alu/${e}.png"></li>`
    })
    _li += `<li class="smilies-name" data-id="${i}"><span>${y}</span></li>`
    fragment.appendChild(_ul); //添加ul
})
let _div = document.createElement("div");
_div.setAttribute('class', 'smilies-bar')
_div.innerHTML = `<ul class="smilies-packages">${_li}</ul>`
fragment.appendChild(_div); //再次添加div
_smilies.appendChild(fragment);