如何通过点击联系人打开聊天标签？

Question

如果你能帮我解决这个问题，我很乐意。我正在尝试创建联系人列表，如下所示，然后可以打开该联系人的聊天选项卡。不知何故，似乎JS不起作用，如果你能帮助我，我会很感激。

第1篇（HTML联系人）

<div id="contact-list">
                <div class="contact-line">
                    <div class="status"><div class="online"></div></div>
                    <div class="user-photo"></div>
                    <div class="unread-wrap"><div class="unread">2</div></div>
                    <div class="contact-name">111111111</div>
                    <button onclick="createConversation(0)">Open Chat Tab</button>
                </div>

                ...

</div>

<ul id="ConversationsHeaderList">
</ul>

<script type="text/javascript" src="---.js"></script>

第二件（JS）

var friendsList = document.getElementById("contact-list").getElementsByClass("contact-line").innerHTML;
var conversations = [];

function createConversation(contactindex) {

var auxvar = '<button><div class="ConversationHeader">' + friendsList[contactindex].getElementsByClass("contact-name").innerHTML + '</div></button>' + '<div class="status">' + friendsList[contactindex].getElementsByClass("status").innerHTML +'</div>' + '<div class="unread-wrap">' + friendsList[contactindex].getElementsByClass("unread-wrap").innerHTML + '</div>';

conversations.push('<li>' + auxvar + '<div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>' + '</li>');

document.getElementById("ConversationsHeaderList").innerHTML = conversations;

}

不知何故，我无法创造出类似这样的东西：

<ul id="ConversationsHeaderList">
    <li class="ConversationsHeader">
                        <button><div class="ConversationHeader">111111111</div></button>
                        <div class="status"><div class="online"></div></div>
                        <div class="unread-wrap"><div class="unread">2</div></div>
                        <div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>
    </li>
</ul>