jQuery: trying to create "slug", target anchors

Question

Creating a Slug

Title variable which holds name of the article "Article X".

$("div.article h2").each(function(){
  var title = $(this).text();

Attempt to create slug with trim, lowercase, and replace methods

var slug = title.trim().toLowerCase().replace(" ", "_");

Attemp to Insert the Target Anchors

var target_anchor = "<a name='" + slug + "'/>";

This is where I got CONFUSED in the Instructions:

Then, on your own, use the append method to stick this inside the h2. Remember that self is a pure Javascript object and it doesn’t have an append method. Link to the Targets

We need to add links into the list_item. On your own, work with the var list_item= line to include a link tag where the href points to #article_x where article_x is the current slug.

How do I write this?

My attempt did not work:

     var list_item = "<li>" + "<a href='#article_x'</a> " + slug + "</li>"

Answer 1

You should do

$("div.article h2").each(function(){
  var title = $(this).text();
  var slug = title.trim().toLowerCase().replace(" ", "_");
  var list_item = "<li><a href='#"+slug+"'> " + title + "</a></li>";
  $(this).prop('id', slug);
  $(WHERE_YOU_WANT_TO_APPEND_IT).append(list_item);
}

Change WHERE_YOU_WANT_TO_APPEND_IT by your selector