JS function to append an external icon and how to position it

I’m trying to create a JS function that appends an icon(from font-awesome(I got it linked to the html file)) to the far-right side of the “li” row when the mouse hovers on it. But something seems off that it doesn’t work.

The JS function in question.

const liElement = document.querySelectorAll("li")

   function appendIconToLi(liElement) {

    const iconDOM = document.createElement('icon');
    iconDOM.classlist = `<i class="fa-thin fa-house"></i>`

    liElement.addEventListener('mouseenter', () => {
      liElement.appendChild(iconDOM);
    });
    liElement.addEventListener('mouseleave', () => {
      liElement.removeChild(iconDOM);
    });
   }

HTML section looks like this

    <ul id="DadsList">
      <li>3 liters of Milk</li>
      <li>Bread</li>
    </ul>

CSS for ul.

  ul {
    margin: 0;
    padding: 0;
  }
  
  ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
    list-style-type: none;
  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  ul li:nth-child(odd) {
    background: #f9f9f9;
  }
  
  ul li:hover {
    background: #ddd;
  }
  
  ul li.checked {
    background: #276678;
    color: #fff;
    text-decoration: line-through;
  }
  
  ul li.checked::before {
    content: "";
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
  }

I’m slightly lost on how to style an element in JS. Example is to position it to the far right of the “li” element as mentioned above.