How to use var javascript in innerHTML? -

how use javascript variable when setting innerhtml of element? see problem first click click 1. show delete , click delete. why alert not show 111-aaaa,1? how can that?

https://jsfiddle.net/brf75wvp/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <input id="test_id" value="1"/> <div onclick="test_fn1()">click 1</div> <div id="demo"></div>  <script>     function test_fn1() {         var test_id_val = document.getelementbyid("test_id").value;         document.getelementbyid("demo").innerhtml = "<span onclick= delete_fn('111-aaaa, test_id_val')>delete</span>";     }; </script>  <script>     function delete_fn(no_delete) {         alert(no_delete);     }; </script> 

you should add variable string following.

function test_fn1() {     var test_id_val = document.getelementbyid("test_id").value;     document.getelementbyid("demo").innerhtml = "<span onclick=delete_fn('111-aaaa,"+test_id_val+"')>delete</span>"; }