How to append html string to a div in jquery-CodePudding

I've a html string value from .net and stored in view data

in jquery i'm reading that like this

 var htmlTranTable = '@ViewData["tblView"]';    
                $('#divTransactions').append(htmlTranTable);

And this is the sample html string that i received from .net viewdata

var htmlTranTable = `<table class='table table-bordered row-border table-responsive' id='htmlTableTransactions'>
   <thead>
      <tr>
         <th class='text-nowrap'>Transaction No</th >
         <th class='text-nowrap'>Status</th >
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>510002500007484</td>
         <td>Completed With Migration Successful</td>
      </tr>
      <tr>
         <td>510002500007475</td>
         <td>Completed With Migration Successful</td>
      </tr>     
   </tbody>
</table>`

when I try to append the value in a div like this

HTML/Div

<div  id="divTransactions" style="overflow:hidden"></div>

 $('#divTransactions').append(htmlTranTable); 
 // or
 document.getElementById("divTransactions").innerHTML  = htmlTranTable;

when I run this I'm getting output like this image

as plain string inside the div .. please let me if you've any solution thanks

CodePudding user response：

try with one of these:

function appendData(id, datos) {
    var line = document.getElementById(id);
    var div = document.createElement("DIV");
    div.classList.add("col-6", "col-lg-12", "text-center", "px-1");
        div.innerHTML = datos;
        line.appendChild(div);
}

first create the div element inside your div, and then do the innerhtml like this. hopes it helps this example

CodePudding user response：

You can use the below code

$('#divTransactions').html({Your HTML Code Or String});
Or if you get a string then use below code
$('#divTransactions').append($({Your HTML Code Or String}));

This is perfect for working with your code.