Understanding nodes and how to append

Question

I've been working on a project that some other developers had started and I'm trying to understand the code while also completing the project. Currently what I have is some json with links and a url text (pretty much a quick description), what I need to do is on a button click I want to display each of the links with their correct text and make it a clickable link. The way this needs to be done is using nodes which I'm not 100% knowledgeable on. If I need to explain this more please let me know also I have provided an example of what I'm currently working with. Thanks

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JavaScript And JSON</title> </head> <body bgcolor='#CED3F3'> <button onclick="appendUrl()">Append</button><br> <br><script id = "i"> function category() //adding function with button click removes html page styling? { var category = { "content": [ { "links": "basic information", "urlText": "Basis Information System", "urlDesc": "portal for technology development, people search, a keyword search ." }, { "links": "http://site.com", "urlText": "Net", "urlDesc": "the entry page example" }, { "links": "http://newsgroups.com", "urlText": "Newsgroups", "urlDesc": "information internal newsgroups, usage, tools, statistics, netiquette" }, { "links": "http://site2.com", "urlText": "Another site", "urlDesc": "community for transfer of knowledge and technical information" }, { "links": "http://news.com", "urlText": " some news", "urlDesc": "place with news" } ] } </script> <script> function appendUrl() { //there needs to be a loop here? var link = "needs to loop through links?" var node=document.createElement("LI"); var nodeA=document.createElement("A"); var textnode=document.createTextNode(); node.appendChild(nodeA); nodeA.appendChild(textnode); nodeA.href=(link); nodeA.target="_blank"; document.getElementById("i").appendChild(node); } </script> </body> </html>

Could you be more specific about what you don't understand? That being said, a few comments about your current code: (1) function category does nothing, it should at least return your data; (2) on the other function, yes, you should be looping your data object; and (3), don't append html into a <script> element, append to a ul where list items are valid children. — bfavaretto
– bfavaretto, Commented Jul 14, 2013 at 19:16

James Holderness · Accepted Answer · 2013-07-14 19:16:33Z

First you are going to need your category function to actually return the json data, otherwise it is of no use to anyone.

function category() { var category = { "content": [ ... ] } return category; }

Then you can simply loop over the content array in the category object like this:

var content = category().content; for (var i = 0; i < content.length; i++) { var item = content[i]; var link = item.links; var node=document.createElement("LI"); var nodeA=document.createElement("A"); var textnode=document.createTextNode(item.urlText); node.appendChild(nodeA); nodeA.appendChild(textnode); nodeA.href=(link); nodeA.target="_blank"; document.getElementById("i").appendChild(node); }

However, if you're going to be creating list items in the markup, you are going to want to add them to a ul element, so you should have a ul somewhere in your markup like this:

<ul id="i"></ul>

And remove the id="i" from the script tag. You don't want to add the list items to the script.

ah this makes a lot more sense now, I will have to give this a try then for myself. thank you!

Joe Minichino · Accepted Answer · 2013-07-14 19:15:27Z

This is the type of stuff jquery makes very easy to accomplish - if you can use it in your project.

var ul = $("<ul></ul">); for(var i in category.content){ var li = $("<li></li>"); var a = $("<a href='" + category.content[i].links + "'>" + category.content[i].urlText + "</a>"); li.append(a); ul.append(li); } containerDiv.append(ul);

In your example you also make list items children of a script tag. Not sure what your goal was there but I would have a plain div.

If you really have to do it in plain javascript:

var containerDiv = document.getElementById("parent"); var ul = document.createElement("ul"); for(var i in category.content){ var li = document.createElement("li"); var a = document.createElement("a"); a.href = category.content[i].links; a.innerHTML = category.content[i].urlText; li.appendChild(a); ul.appendChild(li); } containerDiv.appendChild(ul);

A fiddle here

I did consider using jQuery but I wanted to make sure I understood it at a more basic level first, this definitely helped a lot though thank you!

Collectives™ on Stack Overflow

Understanding nodes and how to append

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related