Question

jQuery code:

$(document).bind('click', function(e) {
    console.log(e.target);
    alert(e.target);
});

The e.target contains the name of the object which is being clicked.
For demonstration purposes, if I click on an input element, the above code prints the following :
For console.log():

<input class="buton" type="submit" value="Send" name="Send">

For alert():

[object HTMLInputElement]

However, if I replace console.log(e.target) with console.log(e.target.toString()), it prints the same thing as alert(), meaning:

[object HTMLInputElement]

My scope is to store the HTML code returned by console.log() into a variable, but I can’t understand the behaviour.

Answer 1

In the event handler, e.target is the element that the click originated from. Most browser consoles display this as the html string that represents the element.

When you use alert, the argument supplied is converted to a string, so you’ll see [object HTMLInputElement].

To get to the HTML of an element, use:

alert(e.target.outerHTML);