Add ID to Graphviz generated SVG nodes for javascript manipulation

I am using pydotplus to generate the graph and graphviz to store it in SVG:
For eg, I add node with (there is no attrbute to specify node ID):

    g.add_node(pydotplus.Node(fn_name, 
                              style="filled", 
                              fillcolor='cornflowerblue', 
                              shape='Mrecord', 
                              fontname="Consolas", 
                              fontsize=8.0))

resulting SVG file:
https://github.com/tarun27sh/gdb_graphs/edit/master/gallery/test.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: Created by: Tarun Sharma (tarun27sh@gmail.com) Pages: 1 -->
<svg width="872pt" height="45pt"
 viewBox="0.00 0.00 872.00 45.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 41)">
<title>Created by: Tarun Sharma (tarun27sh@gmail.com)</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-41 868,-41 868,4 -4,4"/>

<!-- main -->
<g id="node1" class="node"><title>main</title>
<path fill="blue" stroke="black" d="M12,-0.5C12,-0.5 42,-0.5 42,-0.5 48,-0.5 54,-6.5 54,-12.5 54,-12.5 54,-24.5 54,-24.5 54,-30.5 48,-36.5 42,-36.5 42,-36.5 12,-36.5 12,-36.5 6,-36.5 0,-30.5 0,-24.5 0,-24.5 0,-12.5 0,-12.5 0,-6.5 6,-0.5 12,-0.5"/>
<text text-anchor="middle" x="27" y="-15.4" font-family="Courier New Bold" font-size="12.00" fill="white">main</text>
</g>

<!-- func1 -->
<g id="node2" class="node"><title>func1</title>
<path fill="blue" stroke="black" d="M102,-0.5C102,-0.5 132,-0.5 132,-0.5 138,-0.5 144,-6.5 144,-12.5 144,-12.5 144,-24.5 144,-24.5 144,-30.5 138,-36.5 132,-36.5 132,-36.5 102,-36.5 102,-36.5 96,-36.5 90,-30.5 90,-24.5 90,-24.5 90,-12.5 90,-12.5 90,-6.5 96,-0.5 102,-0.5"/>
<text text-anchor="middle" x="117" y="-15.4" font-family="Courier New Bold" font-size="12.00" fill="white">func1</text>
</g>

<!-- main&#45;&gt;func1 -->
<g id="edge1" class="edge"><title>main&#45;&gt;func1</title>
<path fill="none" stroke="black" d="M54.4029,-18.5C62.3932,-18.5 71.3106,-18.5 79.8241,-18.5"/>
<polygon fill="black" stroke="black" points="79.919,-22.0001 89.919,-18.5 79.919,-15.0001 79.919,-22.0001"/>
</g>

As you can see generated SVG nodes are created with id=nodex, where x=numbers that keeps incrementing:

<g id="node1" class="node"><title>main</title>

How can I relate id of graph node with its title ? Javascript doesn't let me read svg node's title.

To add Javascript, I am adding <script> tags under <svg> tags:

<svg> ....
  <script type="text/javascript">
        window.addEventListener('load',function(){
            alert('Hi')
        })
        function nodeClick() {
            alert('You have clicked a node');
            var node1 = document.getElementById('node1');
            alert(node1.id);
            alert(node1.title);     <= error
        }
    </script>

Edit:

With suggested ans, I can pass id attribute while creating node or egde and use those in javascript (pydotplus allows all attributes that graphviz allows):

g.add_node(pydotplus.Node(elem,
                          id=elem,
                          style="filled",
                          fillcolor='cornflowerblue',
                          shape='box',
                          fontname="Consolas",
                          fontsize=12.0))

g.add_edge(pydotplus.Edge(edge_tuple,id="{}__{}".format(
                                                  edge_tuple[0],
                                                  edge_tuple[1])))

Solution

I know nothing about pydotplus, but the Graphviz language includes an id attribute for nodes, edges, clusters, and graphs.