Javascript 如何将子元素附加到父元素的outerHTML而不是内部？

您好，如何使用outerHTML方法在父元素上附加子元素，使图标位于目标元素的外侧而不是内部？ 在代码段中，您将使用方框内的图标，我希望它们位于外侧 在其他世界中，我希望图标位于框的下方而不是内部 我尝试了flex和其他CSS的东西，但运气不好

//选择
const deleteExisting=document.querySelectorAll（'.solidOnClickDelete'）；
//项目清单
const itemRows=document.querySelectorAll（'.drag item list'）；
const mondayList=document.getElementById（'mondayList'）；
//项目
让updateLoad=false
//初始化数组
让mondayListArray=[]；
让ListArray=[]；
//拖动功能
让人拖；
让updateRow=false；
设拖动=假；
让我们一起去划船；
//从localStorage获取阵列（如果可用），如果不可用，则设置默认值
函数getSavedRows（）{
周一列表数组=[“工作7.00-15.00”，“看医生”]；
}
//设置本地存储阵列
函数updateSavedRows（）{
ListArray=[mondayListArray]；
const arrayNames=[“星期一”]
arrayNames.forEach（（arrayName，索引）=>{
//localStorage.setItem（`${arrayName}Items`，JSON.stringify（listarrays[index]））
});
}
//用于从已删除项目中删除空值的筛选器//
函数过滤器阵列（阵列）{
常量filteredArray=array.filter（item=>item！==null）；
返回过滤器阵列；
}
//为每个列表项创建DOM元素
函数createItemEl（行、行、项、索引）{
//列表项
const listEl=document.createElement（'li'）
listEl.classList.add（'day-item'）；
listEl.textContent=项目；
listEl.draggable=true；
listEl.setAttribute（'ondragstart'，'drag（event'））
listEl.contentEditable=true；
listEl.id=索引；
const divOptions=document.createElement（'span'）；
divOptions.classList.add（'father'，'hidden'）；
divOptions.contentEditable=false；
listEl.onfocus=（）=>divOptions.classList.remove（'hidden'）；
listEl.onblur=（）=>divOptions.classList.add（'hidden'）；
const iconDelete=document.createElement（'i'）；
const-iconYes=document.createElement（'i'）；
添加（'far'，'fa检查圈'，'fa-2x'）；
iconDelete.classList.add（'far'，'fa times circle'，'fa-2x'）；
setAttribute（'onclick'，'updateItem（${index}，${row}）`）；
setAttribute（'onclick'，'deleteItemOnClick（${index}，${row}）`）；
//附加所有内容//
罗威尔·阿佩奇尔德（李斯特）；
listEl.appendChild（divOptions）；
divOptions.appendChild（iconYes）；
divOptions.appendChild（iconDelete）；
};
//更新DOM中的列-重置HTML、筛选器数组、更新本地存储
函数updateDOM（）{
//检查本地存储一次
如果（！updateOnLoad）{
getSavedRows（）；
}
mondayList.textContent=''；
mondayListArray.forEach（（mondayitem，索引）=>{
createItemEl（mondayList，0，mondayitem，索引）；
});
mondayListArray=filterArray（mondayListArray）
updateLoad=true；
updateSavedRows（）；
}
//单击删除-//
函数deleteItemOnClick（id，行）{
//让deleteItem=document.getElementsByClassName（'solidOnClickDelete'）；
const selectedArray=ListArray[row]；
删除所选阵列[id]
/*
deleteItem[0]。onclick=function（）{delete selectedArray[id]}；
console.log（deleteItem[0]）；
updateDOM（）*/
updateDOM（）；
};
//添加到任务数组
函数addToRow（行）{
const itemText=addTask[row].textContent；
const selectedArray=ListArray[row]；
选择Array.push（项目文本）；
addTask[row].textContent=''；
updateDOM（）；
}
//重建阵列
函数数组（）{
mondayListArray=[]；
对于（i=0；i
html{
框大小：边框框；
}
：根{
/*灯光主题默认值*/
/*主要颜色*/
--原色：rgb（255、255、255）；
--主要变体：#b9b9b9；
--二次色：#5c；
/*主色文本*/
--小学：rgb（54,54,54）；
--背景：rgb（78,78,78）；
--背景alt:rgba（253,253,0.952）；
/*背景*/
--背景：rgb（255、255、255）；
/*框阴影*/
--盒影：0 5px20px 1pxRGBA（54,54,54,0.5）；
}
[数据主题=“黑暗”]{
--原色：rgb（39,39,39）；
--主要变体：#777777；
--次要颜色：#e4；
--小学方面:rgb(173173173);；
--背景：rgba（255，255，255，0.9）；
--背景alt:rgba（0,0,0,0.7）；
--背景：#202020；
}
身体{
保证金：0；
颜色：var（--初级上）；
背景色：var（--原色）；
字体系列：“流沙”，无衬线；
}
.slider.round:：before{
边界半径：50%；
}
.主标题{
字体大小：3rem；
颜色：var（--背景色）；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
.主货柜{
利润率：20px；
}
.工作日清单{
显示器：flex；
弯曲方向：立柱；
}
/*成排/成排*/
.day行，.正在填充BTN{
利润率：10px 10px；
背景色：rgba（95,95,95,0.4）；
边界半径：3px；
显示器：flex；
溢出x：隐藏；
柔性包装：包装；
}
.dayFunction{
对齐内容：居中对齐；
证明内容：中心；
页边顶部：自动；
页边距底部：自动；
}
.向右弯曲{
显示器：flex；
浮动：对；
}
.星期一行.页眉，
星期一排，完毕{
背景色：var（--主色）；
}
.隐藏{
显示：无；
}
.日用品{
利润率：10px；
填充：10px；
高度：适合的内容；
背景色：var（--二次色）；
颜色：var（--原色）；
边界半径：3px；
线高：1.5雷姆；
字母间距：1px；
光标：指针；
过渡：1s；
}
.日项目：焦点{
大纲：无；
背景色：