Как преобразовать строку с HTML-разметкой в DOM-объект?

Вот у меня есть класс, который создает карточку с песней для плейлиста:

`use strict`

class Card {
    constructor({ artist, song }) {
        this.artist = artist
        this.song = song
        this.card_item = this.create(this.artist, this.song)

        this.like = this.like.bind(this)
        this.remove = this.delete.bind(this)


        // this.card_item.querySelector('.fa-trash').addEventListener('click', this.delete)
        // this.card_item.querySelector('.fa-hear').addEventListener('click', this.like)

    }

    create(artist, song) {
        return `
            <div class="card">
                <span class="card__artist">${artist}</span>
                <span class="card__song">${song}</span>
                <button class="song__like"></button>
                <i class="fas fa-trash"></i>
            </div>
        `
    }

    like(event) {
        event.target.classList.toggle('heart_black')
    }

    delete(event) {
        const card = event.target.closest('.card')
        card.classList.add('hide')

        event.target.querySelector('.fa-heart').removeEventListener('click', this.like)
        event.target.querySelector('.fa-trash').removeEventListener('click', this.delete)
    }
}

В конструкторе закомментированы 2 строки где я пытаюсь на кнопки карточки повесить обработчики событий (методы класса). Причина: интерпретатор ругается и говорит, что "querySelector is not a function".

Похоже, потому, что в this.card_item хранится строка с разметкой, а querySelector можно применить только к DOM-обхекту.

Как мне доработать метод 'create' чтобы все заработало нормально? Спасибо