My understanding of javascript, the DOM, and d3.js is still a work in progress. I apologize for asking such a basic question as the one below. I'm new to this.
Here's the json data I have:
[{"link":"a", "count": 3}, {"link":"b", "count": 4}, {"link":"c", "count": 2}]
and I want to create something that resembles
<ul>
<li> <a>a</a> (3)</li>
<li> <a>b</a> (4)</li>
<li> <a>c</a> (2)</li>
</ul>
using d3.js (I have bigger plans with d3, this is just a starting point).
After inserting a <ul> tag in my html, within a callback function from d3.json, I could write something like this:
d3.select("ul")
.selectAll("li")
.data(json)
.enter()
.append("li")
.append("a")
.text(function(d){return d.link})
(though this code hasn't been tested! how do javascript developers test small snippets of code?). This code will likely give me
<ul>
<li><a>a</a></li>
<li><a>b</a></li>
<li><a>c</a></li>
</ul>
but now I can't seem to get out of the <a> tags! I can't figure out how to add that extra information before closing the list item tag. What should I do?