将HTML置于光标旁边

Question

I would like to know how to position a fragment of html to appear next to where the cursor is, specifically on click. So far I have a div which will position itself next to the cursor on click.

 shape.on('click', function(event){ 
   if (event.which == 1) {
          $("#message").css({
                top: event.pageY + 5,
                left: event.pageX + 5
            }).show();
   }
});

But rather what I am after is to not 'show' any existing div, but insert new code 'on the fly' to where the cursor is.

Thank you

Answer 1

Use .html() to insert the text into the div that appears next to your cursor.

Example: $("#message").html("html text that you want");

If you want to continue to add text to message then use .append() , otherwise .html() will overwrite the contents of #message each time.

Answer 2

You just have to append ( append ) or insert ( html ) the code you want on that div:

$('#message').html('Hello world!');

Full code:

 shape.on('click', function(event){ 
   if (event.which == 1) {
          $("#message").css({
                top: event.pageY + 5,
                left: event.pageX + 5
            }).show();

          $('#message').html('Hello world!');
   }
});

Living demo: http://jsfiddle.net/zEsF5/3/

Answer 3

You can add new elements easily if you do:

shape.on('click', function(event){ 
  if (event.which == 1) {
    $("<div>The <strong><em>HTML</em> code</strong> you want<br/>can go here<div>").css({
           top: event.pageY + 5,
           left: event.pageX + 5,
           position: 'absolute'
    }).appendTo(shape).show();
  }
});

There is a working JS Fiddle