Better way to display list of categories I need to display a list of category links, like so:

Category 1, Category 2, Category 3

I've got it working already but the code seems pretty repetitive and a bit of a mess, I was wondering if there was a better way of doing it.

This is what I've got so far:

for (var i = 0; i &lt; data['categories'].length; i++) {
    var comma = document.createTextNode(', ');
    var link = document.createElement('a');
        link.setAttribute('href', '#journal__category--' + data['categories'][i]['url_title'] );
        link.setAttribute('class', 'js--page__link');
        link.innerHTML = data['categories'][i]['category_name'];

        document.getElementById('js--journal__categories').appendChild(link);
        if( (i + 1) != data['categories'].length ) {
            document.getElementById('js--journal__categories').appendChild(comma);
        }
}
Here's how I might try to clean things up:


refer to object properties without bracket notation where possible
e.g. data.categories.length
create a loop variable for the current category, which allows you to reference it nicely without data.categories[i]

for (var i = 0; i &lt; data.categories.length; i++) {
    var category = data.categories[i];
}

don't look up the container on every iteration, move that outside the loop:

var container = document.getElementById('js--journal__categories');
for (...loop...) {
    ...create your node...
    container.appendChild(link);
}

same for creating the comma node, create it outside the loop.
you don't need to wrap i + 1 in parenthesis, and this is just my preference, but you should be consistent with spaces. You could also use &lt; instead of != which is more consistent with the for loop. (These are fairly minor nits)

if (i + 1 &lt; data.categories.length)

Why are you using double dashes and underscores in your element IDs? 
Comments are helpful to explain what your for loop and if statement is doing, since it's probably easier/quicker to understand the comment than figure out the for loop.
Maybe I'm getting overkill at this point, but a way to write really descriptive, easy to read code is to break it into functions whose name makes sense:

function createCategoryElement(name, url_title) {
    ...create your anchor element here...
    ...set its attributes and content, etc...
    return element;
}



I ended up with something like this:

var data = {
  categories: [
    {name: 'one', url_title: 'oneUrl'},
    {name: 'two', url_title: 'twoUrl'}
  ],
};

var container = document.getElementById('container');
var comma = document.createTextNode(', ');

function createCategoryElement(name, url) {
  var urlBase = '#journal-category-';
  var cssClass = 'js-page-link';

  var el = document.createElement('a');
  el.setAttribute('href', urlBase + url);
  el.setAttribute('class', cssClass);
  el.innerHTML = name;
  return el;
}

// Create HTML elements for each category and append them to the DOM.

for (var i = 0; i &lt; data.categories.length; i++) {
  var category = data.categories[i];
  var categoryElement = createCategoryElement(category.name, category.url_title);
  container.appendChild(categoryElement);

  // Join categories with a comma
  if (i + 1 &lt; data.categories.length) {
    container.appendChild(comma);
  }
}

        for (...loop over categories...) {
            ...
            var categoryElement = createCategoryElement(category.name, category.url_title);
            container.appendChild(categoryElement);

            if (i + 1 &lt; data.categories.length) {
                containenr.appendChild(commaElement);
            }
        }