javascript - I need to keep element reference to pass on -

when user clicks on <a> tag calls function following:

<a href="#" onclick="func1(this)">; 

this function generates html modal needs reference first button.

func1(elem) {   html='<div class="modaldiv">' +   '<a href="#" onclick="func2(e.srcelement)">'+   '</div>';  } 

when link inside modal clicked, func2() should save text data attribute inside first link, not working, returning:

"uncaught syntaxerror: unexpected identifier "

first, don't use inline html event handling attributes (onclick, onmouseover, etc.), here's why.

but, actual problem not declaring function.

this: func1(elem)

needs this: function func1(elem)

next, <a> elements must have content see , click on , must closed, didn't have.

function func1(elem) {    html='<div class="modaldiv">' + '<a href="#" onclick="func2(e.srcelement)">click me too</a>'+ '</div>';    document.body.innerhtml += html;  }

<a href="#" onclick="func1(this)">click me</a>

if rework answer use modern standards, proper modern way be:

// references dom elements  var a1 = document.getelementbyid("firstanchor");  a1.addeventlistener("click", func1);    // callback first link:  function func1(e) {    // store original source element    var src = e.srcelement;      // formally create new elements , configure them    var d = document.createelement("div");    d.classlist.add("modaldiv");        var = document.createelement("a");    a.href = "#";    a.textcontent = "click me too!";    // hooking wrapper function, can have function    // pass arguments actual callback function:    a.addeventlistener("click", function(){      func2(src);    });        // add new elements document    d.appendchild(a);    document.body.appendchild(d);    }    function func2(firstsrc){   console.log("func2 invoked , e.srcelement first link is: ", firstsrc);  }

<a href="#" id="firstanchor">click me</a>