Title: use jquery append function
Last modified: August 21, 2016

---

# use jquery append function

 *  Resolved [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/)
 * Hi, I am still a bit confused of using jquery in WordPress. I found a method 
   to wrap the $ shortcut to use jquery ([jquery noConflict wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers)).
   For the simple task of appending a table I tried the following example which 
   unfortunately did not work:
 *     ```
       <table id="table1">
       <thead><th>col1</th></thead>
       <tbody></tbody>
       </table>
       <script>
       var table = document.getElementById('table1');
       (function($) {
         $(table).find(tbody).append( "<tr><td>data1</td></tr>" );
       })(jQuery);
       </script>
       ```
   
 * (The example only shows the second way of wrapping the $ operator. I also tried
   the first which did not work.)
 * Not sure if it helps but a more simple example without a table worked:
 *     ```
       <p>I would like to say: </p>
       </div>
       <script>
       (function($) {
         $( "p" ).append( "<strong>Hello</strong>" );
       })(jQuery);
       </script>
       ```
   
 * Any help is highly appreciated. Thanks.
 * Toby

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808250)
 * A slimmer version of the code above:
 *     ```
       $("#table1 tbody").append("<tr><td>data1</td></tr>");
       ```
   
 * works in a [jsfiddle example](http://jsfiddle.net/xW4NZ/323/). However not in
   WordPress.
 * Thanks for any help
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808305)
 * The first example without the wrapper does not work in jsfiddle either. Have 
   you tried the last example in the wrapper?
 * For simple code just replace the `$` with `jQuery` and forget the wrapper.
    `
   jQuery("#table1 tbody").append("<tr><td>data1</td></tr>");`
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808324)
 * Thanks! I have tried all three versions (two wrappers and no wrapper) with the
   last example, which did not work. I also tried deactivating all plugins to test
   it.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808344)
 * Did you remember to enqueue the jQuery library? Are you using the correct action
   hook to do so? Also check your page HTML source to confirm that it is properly
   referenced.
 * FYI, I placed your first example code on a WP page that has jQuery loaded, then
   substituted the example code from my previous post for the wrapper code. The 
   page displayed text exactly as it appeared in jsfiddle.
 * I saw all your posts in your other thread. I suspect your issues are related,
   I’m putting off studying your other posts until this part is resolved, as it 
   may resolve both.
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808348)
 * Thanks! I created a file called code.js with:
 *     ```
       jQuery("#table1 tbody").append("<tr><td>data1</td></tr>");
       ```
   
 * and called it in WP with:
 *     ```
       <script type="text/javascript" src="/code.js"></script>
       ```
   
 * This worked and I did not have to include any enqueues in my functions.php. However
   doing the same for the simple click button example ([use jquery post onsubmit function](http://wordpress.org/support/topic/use-jquery-post-onsubmit-function))
   this did not work. I also tried in the button click example to enqueue jquery
   and add a hook for the script (not sure if I did it correctly).
 * Thanks for your help
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808353)
 * Perhaps you didn’t have to enqueue, but that is correct way to do it, especially
   with external files. Not enqueuing seems to work for short code snippets, but
   eventually fails as the code gets more complex. Enqueuing external files will
   work for the most complex code, or the simplest, but it’s not that hard to get
   it wrong so it doesn’t work.
 * Be sure to specify `array(jquery)` as the dependency parameter, and be sure you
   are using the correct hook for where the code is being executed: front end, back
   end, and login all have their own action hooks. If you’re not sure, post your
   enqueue code so I can have a look. Let me know where the code is to be applied.
 * Finally, examine the page HTML source in your browser to ensure the reference
   path to the external file is correct.
 * This all applies to your onsubmit problem as well, I’m still going to delay studying
   that problem until you are able to properly enqueue this append code and confirm
   it’s working.
 *  Thread Starter [T.oby](https://wordpress.org/support/users/toby-1/)
 * (@toby-1)
 * [12 years ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808369)
 * Thanks for your detailed answer. For the table example it only worked when I 
   put the code in the file. But I did not have to do any hooks. For the other code
   with the button click example my code was wrong. I should have only used jQuery(“
   button”).click() and put the code after the button. Thanks for your help!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘use jquery append function’ is closed to new replies.

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 7 replies
 * 2 participants
 * Last reply from: [T.oby](https://wordpress.org/support/users/toby-1/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/use-jquery-append-function/#post-4808369)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics