Prepending javaScript element with html snippet into another html node

Question

I am trying to insert a html block of code before the previous one. I am using the prepend() method to insert into a list and it works I am inserting where I want but its only outputting the plain html code

HTML

<div class="comments-list">
                            <ul class="comment-list-ul" id="comment-list-ul">
                            <?php require_once INCLUDES . 'blog-box.php';?>
                            </ul>
    </div>

js.

function insertInto (){
    var block = '<li class="comment-holder" id="_1"> ' + 
                 '<div class="user-text"> ' + 
                 '<h3 class="comment-username"></h3> ' +
                 '</div> ' +
                 '<div class="comment-body"> '+
                 '<div class="comment-text"></div> '+
                 '</div> '+
                 '<div class="comment-buttons"> '+
                 '<ul><li class="deleteBtn">Delete</li></ul> '+
                 '</div> '+
                 '</li> ';

            $('comment-list-ul').prepend(block);
    }

Output

<li class="comment-holder" id="_1"> <div class="user-text"> <h3 class="username-field"></h3> </div> <div class="comment-body"> <div class="comment-text"></div> </div> <div class="comment-buttons-holder"> <ul><li class="delete-btn">Delete</li></ul> </div> </li>

What am I doing wrong?