How do I Get Text from Dynamically created element in JavaScript

Question

I am dynamically creating Div Text in JS and was wondering how I access the various text upon click.

Here is what I have tried so far;

My Dynamically created div

function Message(Side, message) {

var divChat = '<div class="direct-chat-msg ' + Side + '">' +
                  '<div id="myDiv" class="direct-chat-text">' + message + '</div>' +

                    '<div id="accountMenu">' +
                    '<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
                    '<li>Preferences</li>' +
                    '</ul>' +
                    '</div></div>';

    $('#divChatWindow').append(divChat);

}

JS when the li is clicked on.

 function getMessage(str) {
     alert(str);
 }

The error I am getting is:

Uncaught ReferenceError: *whaeverthemessageis* is not defined
    at HTMLLIElement.onclick

What is the best solution to solve this problem?

Thanks =)

Answer 1

You have malformed html using single and double quotes. The message is being treated as a variable, not a string, hence the undefined error.

replace:

'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +

with this:

'<li onclick = "getMessage(\'' + message + '\')" id="replyDiv">Reply</li>' +

Answer 2

I'm not exactly sure what the problem is, but here is a working Playcode