如何在javascript中在文本旁边添加图像？

我正在尝试制作一个像youtube那样的登录按钮，左边是图像，右边是文本

我试着用下面的代码来做这件事，但是如果你运行它，你会发现图像没有显示出来

如何使图像显示在文本的左侧？

document.getElementById（'profileItem'）.style.width='150px'；
document.getElementById（'profileItem'）.style.borderRadius='10px'；
document.getElementById（'profileItem'）.style.background='none'；
//document.getElementById（'profileItem'）.style.background='url（images/SignUpBackground.png）'；
//document.getElementById（'profileItem'）.style.backgroundSize='cover'；
//document.getElementById（'profileItem'）.style.backgroundRepeat='no-repeat'；
document.getElementById（'profileItem'）.style.border='1px solid'787CF5'；
//document.getElementById（'profileItem'）.innerHTML=“登录”；
document.getElementById（'profileItem'）.style.color=“#787CF5”；
document.getElementById（'profileItem'）.style.fontSize=“20px”；
var btn=document.getElementById（“profileItem”）；
btn.setAttribute（“src”、“images/defaultProfImg.png”）
var title=document.createElement（“h4”）；
title.innerHTML=“登录”；
附文：子女（头衔）
.profileItem{
高度：66px；
宽度：66px；
背景图像：url（“../images/defaultProfImg.png”）；
/*背景颜色：蓝色*/
背景重复：无重复；
背景尺寸：封面；
边框：1px实心#3838；
右：10px；
位置：固定；
边界半径：40px；
边缘顶部：7px；
光标：指针；
}
.项目h4{
保证金：自动；
文本对齐：居中；
垂直对齐：中间对齐；
}
有很多方法可以做到这一点，但我喜欢使用
flex
display


.myButton{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充物：5em 0.75em；
光标：指针；
}
.myButton img{
宽度：24px；
右侧填充：.75em；
}
.myButton.text{
左侧填充：.75em；
}

登录
按钮中也没有文本。。。我的意思是，图像不会出现在代码段中，因为堆栈溢出不会在其服务器上的图像文件夹中托管名为defaultProfImg.png的图像，但这是另一个问题。
display:inline block可能就是您在这里要找的。@StackSlave不工作。附议！学习flexbox！我有一段时间没有学习它（害怕改变，看起来很吓人），但它对于制作布局来说是如此强大。CSS技巧指南非常有用：