Jquery Insert element in an other on event

Question

First post here and quite new on javascript/jquery/webstuff but even after some research about the thing I'm trying to do, I didn't manage to find something that made this thing work.

So, here is the context :
I'm creating a schedule with HTML and Javascript/Jquery.

I want to be able to inject an automated generated <span> or something directly by clicking on the day (which is a <td> ).

At first I used basic stuff like "getElementById()" but if I manage to do the thing with this, I'm going on a lot of repetitive code. And I'm quite sure I can avoid this.

So basically I wanted to do generic code and be able to get the which the user clicked.

Here is what I managed to do by now: HTML part :

<table>
    <tr>
        <th class="day-name">Sun</th>
        <th class="day-name">Mon</th>
        <th class="day-name">Tue</th>
        <th class="day-name">Wed</th>
        <th class="day-name">Thu</th>
        <th class="day-name">Fri</th>
        <th class="day-name">Sat</th>
    </tr>

    {% set counter = namespace(a=0) %}
    {% for x in range(0, 5) %}
        <tr class="week">
            {% for y in range(0, 7) %}
                {% set counter.a = counter.a + 1 %}
                <!-- <td id="2" class="day" onclick="addEvent()"><span class="number">{{ counter.a }}</span></td> -->
                <td id="day_{{ counter.a }}" class="day"><span class="number">{{ counter.a }}</span></td>
            {% endfor %}
    {% endfor %}
</table>

Javascript Part :

function addEvent(){
    var node = document.createElement("span");
    node.setAttribute("class", "event");
    document.getElementById("2").appendChild(node);
};

$(document).ready(function(){
    $("td").click(function(){
        alert("Ahahahah");
        var node = document.createElement("span");
        node.setAttribute("class", "event");
        document.getElementById(this).appendChild(node);
    });
});

The {% ... %} is from Flask/Jinja stuff, but I'm quite sure that's not the problem.

The script is in an other file, but the file is included. (Sure about it because the script "addEvent" works well).

So I tried many, many things, but still not working. The alert pop-up is not even showing up, so I can't try the script. I guess that the way to inject the new element is wrong, but I didn't saw anything with the way I was looking for.

So here it is, thanks in advance for those who take the time to help me on this

Answer 1

I see

onclick="addingEvent()" 

but

function addEvent(){

Mabay this is the problem?

Answer 2

You need to use the reference to this and using this can append with it.

 $(document).ready(function(){ $("td").click(function(){ alert("Ahahahah"); var node = document.createElement("span"); node.setAttribute("class", "event"); this.appendChild(node); }); });