Add html string inside td of table-CodePudding

I need create a table from array string, and I use template script, it working with normal string but when I add string have html tag (ex: test) in array and my result show a button in td tag but I want it is string "test". How I can show string html in td? Here is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>JSON Transform</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
      <script type="text/javascript" src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
      <script type="text/template" id="tpl-html1">
         <div class="well">
             <table class="table">
                
                 <tbody>
                 <% _.each( target, function(i) {%>
         
                     <tr>
                         <td>'<%= i %>'</td>
                     </tr>
                 <% }); %>
                 </tbody>
             </table>
         </div>
      </script>
      <script>
         $( document ).ready(function() {
            var rawData = ["line 1 <button>test</button>","line 2"," line3"];
            var data = { target:rawData };
            var template = _.template( $("#tpl-html1").text() );
            $("#output").append( template(data) );
         })
      </script>
   </head>
   <body style="padding:50px 10px ">
      <div id="output"></div>
   </body>
</html>

Thank you verymuch.

CodePudding user response：

If you want to display the without it converting to an HTML element you can escape the > and < symbols like this:

'<' = '&lt;'
'>' = '&gt;'

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>JSON Transform</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
      <script type="text/javascript" src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
      <script type="text/template" id="tpl-html1">
         <div class="well">
             <table class="table">
                
                 <tbody>
                 <% _.each( target, function(i) {%>
         
                     <tr>
                         <td>'<%= i %>'</td>
                     </tr>
                 <% }); %>
                 </tbody>
             </table>
         </div>
      </script>
      <script>
         $( document ).ready(function() {
            var rawData = ["line 1 &lt;button&gt;test&lt;/button&gt;","line 2"," line3"];
            var data = { target:rawData };
            var template = _.template( $("#tpl-html1").text() );
            $("#output").append( template(data) );
         })
      </script>
   </head>
   <body style="padding:50px 10px ">
      <div id="output"></div>
   </body>
</html>