将HTML标记添加到由jQuery添加的div

Question

I have an onclick function that adds HTML markup (a table) to a specific div with an id attribute.

Example:

$(‘#someDiv’).html(‘<table id=“userTable”><\table>’);

I want to create another function that adds HTML markup to the markup I already added via jQuery.

Example:

$(‘#userTable’).html(‘<tr><td>Hello<\td><\tr>’);

But, the computer didn't know the id “userTable” and adds nothing to the table .

How can I access this table from another function and add to its HTML markup?

Answer 1

I'm not sure if "userTable" is a static or dynamic ID. This is what I understand you need

  $(function(){ $("#btnAddRow").hide(); $("#btnAddTable").click(function(){ let targetDiv = $("#targetDiv"), new_table = $("" + "<table border='1' id='userTable'>" + "<thead>" + " <tr>" + " <th>Column 1</th>" + " <th>Column 2</th>" + " </tr>" + "</thead>" + "<tbody></tbody>" + "</table>"); targetDiv.append(new_table); $("#btnAddRow").show(); }); $("#btnAddRow").click(function(){ let targetDiv = $("#targetDiv"), userTable = targetDiv.find("#userTable"), new_tr = $("" + "<tr>" + " <td>Something</td>" + " <td>Something Else</td>" + "</tr>"); userTable.find("tbody").append(new_tr); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="btnAddTable">Add Table</button> <button type="button" id="btnAddRow">Add Row</button> <div id="targetDiv"> </div>