Generate HTML using jQuery

Question

i'm trying to generate some HTML using jQuery, I want to just create the elements with the required classes etc, and then append them to each other if that makes sense. I have written the below code, it doesn't produce any errors but also isn't adding the HTML to container at all.

What's wrong?

(function($) {
    $.fn.twitter_plugin = function( options ) {

    var container = this[0];

    console.log('Started');
    // Make aJax call

    // Generate HTML
    $con = $("<div>", { "class" : "tweet" });
    $(container).append($con);
      $col1 = $("<div>", { "class" : "twocol" });
      $con.append($col1);
      $col2 = $("<div>", { "class" : "tencol last" });
      $con.append($col2);

        // Profile Image
        $tweet_profile_div = $("<div>", { "class" : "tweet-profile-photo" });
        $col1.append($tweet_profile_div);
          $profile_img = $("img", { "src" : '', "class" : "responsive-img" });
          $tweet_profile_div.append($profile_img);
        // END Profile Image

      // Tweet
      $tweet_head = $("div", { "class" : "tweet-head" });
      // END Tweet

  };
}(jQuery));

Executing this like so:

<script src="js-src/themev2/twitter_plugin.js"></script>
<script>
$( document ).ready(function() {
    $("#map_canvas").twitter_plugin({ });
});
</script>

Edit 1

@Sean Reimer, my twitter_plugin function is being executed without that change you suggested, as the console.log is displayed, so this isn't the issue

Do you get your console log?

Adjit
– Adjit

2016-07-28 17:03:01 +00:00
Commented Jul 28, 2016 at 17:03 — Adjit
– Adjit, Commented Jul 28, 2016 at 17:03
Did you include jQuery?

gaetanoM
– gaetanoM

2016-07-28 17:05:47 +00:00
Commented Jul 28, 2016 at 17:05 — gaetanoM
– gaetanoM, Commented Jul 28, 2016 at 17:05

Sean Reimer · Accepted Answer · 2016-07-28 17:58:32Z

1

The problem is that you have an IIFE for jquery, but within you have your '$.fn.twitter_plugin function' defined but not called. At the end of your function definition you should add () to invoke it as well.

so

      $tweet_head = $("div", { "class" : "tweet-head" });
      // END Tweet
  };

should be

      $tweet_head = $("div", { "class" : "tweet-head" });
      // END Tweet

  }();

I also am not sure if this[0] is entirely reliable it might be better to just save the body as your container element. This is just a window object, so it doesn't have a 0 index element

var container = $('body') would solve your problems.

answered Jul 28, 2016 at 17:58

Sean Reimer

413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martyn Ball Over a year ago

this[0] gets the element defined from here $("#map_canvas").twitter_plugin({ }); as i need to put the new elements in there, not in the body. And thanks for the answer to my question :)

Martyn Ball · Accepted Answer · 2016-07-29 08:46:58Z

0

Silly mistake I made, code works fine, I simply misspelt the ID for the target element, this works now.

answered Jul 29, 2016 at 8:46

Martyn Ball

4,92510 gold badges66 silver badges147 bronze badges

Collectives™ on Stack Overflow

Generate HTML using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related