A pit with listener events when HTML ends up in HTML

First, the back-end programmer wrote the front-end code Demo

    function Test (a) {        console.log (a)    }    var s = "str", str= "WTF";    $ ("Body"). Append (' <div class= ' test ' onclick=test (' +s+ ') >test</div> ');

Guess what happens when you click the test tag to print "str" or "WTF"?

It's "WTF", wtf!.

This piece of code is written on the page in HTML like this

<div class= "test" onclick= "Test (str)" >test</div>

The output of STR is completely a global variable well, well the string.

This kind of writing coupling does not say, encountered this kind of string conversion amount of the pit father.

Workaround, quoted output

$ ("Body"). Append (' <div class= ' test ' onclick=test ("' +s+ '") >test</div> ');

So the output of the HTML is

<div class= "test" onclick= "Test (&quot;str&quot;)" >test</div>

But it is not recommended to write this.

A pit with listener events when HTML ends up in HTML