Select HTML Elements Visually

Question

An HTML webpage is rendered in div. How can I allow the user to click and select any HTML tag? Similar to how Firebug and Chrome does it. I need the selected tag returned as is.

Don't delete it. Instead, accept an answer and let it be for other people that can have the same problem. — Alex Turpin, Oct 03 '11 at 16:31
Think twice before asking a question if you don't want to be embarrassed by it later on. Personally, I wouldn't worry about it. [We](http://stackoverflow.com/q/12268/) [all](http://stackoverflow.com/q/150845/) [have](http://stackoverflow.com/q/244285/) [embarrassing](http://stackoverflow.com/q/379343/) [questions](http://stackoverflow.com/q/1060240/) (I could go on...). — , Oct 07 '11 at 16:25

score 4 · Accepted Answer · answered Oct 03 '11 at 16:10

Add an event listener on your div and check for the event's target property (srcElement for IE).

document.getElementById("page").onclick = function(e) {
    var target = e.target || e.srcElement;
    alert(e.target.tagName);
};

http://jsfiddle.net/Xeon06/e67qW/1/

score 2 · Answer 2 · answered Oct 03 '11 at 16:10

2

In jQuery:

$.click( function(){
   var clicked = $(this); 
});

answered Oct 03 '11 at 16:10

Chris G.

3,963
2
21
40

My initial idea was to allow dragging a rectangle to select a group of elements, but I figured I would have issues determining which child the user really wanted to select among hierarchical elements. So I toned it down to this without really thinking. – HyderA Oct 03 '11 at 16:14
Can also use `$.mouseover` to apply a CSS border to provide visual feedback a'la Firebug – Chris G. Oct 03 '11 at 16:16

score 1 · Answer 3 · answered Oct 03 '11 at 16:12

you can add a onclick attribute to each html element which returns itself.

Chrome and Firefox also have a hover which outlines the element tough. To make that in a easy (and ugly) way you could add a hover css pseudo class for the html elements which adds a border of 1px to the html element.

*:hover{
  border: 1px solid;
}

A better way would be to create a new element with javascript with the same measurements and position and to give it a z-index so it floats above the existing element

Select HTML Elements Visually

3 Answers3