Creating dynamic HTML hyperlinks

Question

Using a list of genes which I have created in a python script, I am trying to create clickable links for each gene in the list. I am using the Flask framework to accomplish this and am able to access the genes in my list with the {{genes}} variable. I am able to see this list when I view the page source, but when I try to add each gene to the body of my DOM with a javascript function I don't see anything. Does anyone know what I am doing wrong?

<!DOCTYPE html>
<html>
    <head>
        <h1>Genes<h1>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

    </head>
    <script type ="text/javascript">
    function showGenes(){

        var name = "";
        for (gene in {{genes}}) {
            var name = document.createElement('a');
            var text = document.createTextNode(name);
            name.appendChild(text);
            document.body.appendChild(name);

        }

}
    </script>

<body onload="showGenes()">

</body>

</html>

Why do you need javascript for creating HTML? Since you are using some templating language already, create thr HTML on the templating level. downvoted.. — user2665694
– user2665694, Commented Oct 7, 2013 at 5:06
It is tagged as python since I am using python's flask framework to generate the gene list. I am not sure how to create the html from the template language, or if it can be done with flask. I know it can be done with javascript, and that's why I asked this question. So how do I do it within the question that I posted? — sreisman
– sreisman, Commented Oct 7, 2013 at 5:13
every python web framework give you the option passing a list or a dict or whatever data to your template and use it for rendering. — user2665694
– user2665694, Commented Oct 7, 2013 at 5:17

ProfHase85 · Accepted Answer · 2013-10-07 16:12:55Z

1

In case {{genes}} is a javascript array, you need to replace your loop the following way (Just remember, it is javascript, not python, so you cannot use for - in loop that easily):

$.each({{genes}}, function(index, value){
     $('body').append($('<a></a>').text(value));
 })

answered Oct 7, 2013 at 16:12

ProfHase85

12.4k7 gold badges56 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

Creating dynamic HTML hyperlinks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related