How add image next to text in javascript?

Question

I am trying to make a Sign In button like the youtube one where there is an image on the left and text on the right.

I tried doing this with the code bellow, but if you run it you will find that the image does not show up.

How can I make the image show up the the left of the text?

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="Sign In";
       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 = "Sign In";
       btn.appendChild(title);

.profileItem {
  height: 66px;
  width: 66px;
  background-image: url("../images/defaultProfImg.png");
  /* background-color: blue; */
  background-repeat: no-repeat;
  background-size:cover;
  border: 1px solid #383838;
  right: 10px;
  position: fixed;
  border-radius: 40px;
  margin-top: 7px;
  cursor: pointer;
}

.profileItem h4 {
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

<div class="myAccountAndUploadDiv" id="myAccountAndUploadDiv">
        <button class="profileItem" id="profileItem"></button>
      </div>

Answer 1

There are many ways to do this, but I like using flex display.

.myButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5em 0.75em;
  cursor: pointer;
}

.myButton img {
  width: 24px;
  padding-right: .75em;
}

.myButton .text {
  padding-left: .75em;
}

<button type="button" class="myButton">
  <img role="presentation" src="https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/512x512/plain/user.png" alt="sign in icon">
  <span>Sign In</span>  
</button>

jsFiddle