How tosecurely append items securely with Jquery

How tosecurely append items securely with Jquery

Hi;

What's the right way of doing this without breaking the page and dealing with XSS?


  1. var str = $('#embed_text_input').val();
  2. if (str.toLowerCase().indexOf("apple") >= 0)
  3.     {
  4.         var embed_button_title = "Apple";
  5.         var icon_value = "fa-apple";
  6.         var found = true;
  7.     }

  1. var append_item = "<div id = \"full_embed_button_"+embed_button_id+"\" class=\"input-group\"><span class=\"input-group-addon\"><span class=\"fa "+icon_value+" \"></span></span><input class=\"form-control btn btn-default\" data-toggle=\"button\" value=\""+embed_button_title+"\" type=\"button\" onclick = \"edit_embed("+embed_button_id+",'"+str+"')\"><span class=\"input-group-btn\" onclick = \"remove_embed('"+embed_button_id+"');\"><button class=\"btn btn-default clear remove-button\" type=\"button\" tabindex=\"99\"><span class=\"glyphicon glyphicon-remove\"></span></button></span></div>";
                                

  1. var $input = $(append_item);

  1. $input.appendTo($("#embed_buttons_box"));

This is the sample of code that I append:

  1. <iframe src="//playlists.applemusic.com/embed/pl.dsdfsdfsdfsd?country=us&app=music" height="500px" width="100%" frameborder="0"></iframe>



Thanks