How to APPEND a automatically created component, not finding the element ID

Asked

Viewed 65 times

1

I’m trying to add a div via append because I’m adding in a table that has auto-created composites like filter, responsive, pagination, so I would like to place inside one of those div that is next to the filter but when placing the id of the div of these components via jquery it cannot identify and does not add

for example:

<script type="text/javascript">
      addSwitches  = '<div class="switch"><label>Off<input type="checkbox" 
      <span class="lever"></span>On</label></div>'
      $("#data-table-simple_wrapper").append(addSwitches);
</script>

or

$("#data-table-simple_wrapper").append("<p>teste</p>");

the div "data-table-simple_wrapper" has no html but when I inspect the table I can take the id of the div and add manualmete by editing the html to test but jquery does not find this ID

html jquery web-application

  • Not in HTML because this div is generated by some plugin? It would be interesting to post the HTML snippet of the inspect if that’s the case. E Is your javascript code in the same HTML file? At what position exactly, start or end?

2 answers

0

To affect elements in html that did not exist in DOM initially (dynamically created) you can use Document before and then find it by div. With that he will search inside the document current and you will find your div.

$(document).find("#data-table-simple_wrapper").append("<p>teste</p>");

0

Add $( document ).ready(function() in your code, because at the time of javascript execution the html document may not have been fully loaded yet, see documentation https://learn.jquery.com/using-jquery-core/document-ready

<script type="text/javascript">
      $( document ).ready(function() {
            addSwitches  = '<div class="switch"><label>Off<input type="checkbox" 
            <span class="lever"></span>On</label></div>'
            $("#data-table-simple_wrapper").append(addSwitches);
      });
</script>

Browser other questions tagged html jquery web-application

You are not signed in. Login or sign up in order to post.