Получить текущий div и добавить html

Question

Я создал на странице, где есть редактируемый контент.

Я хочу дать пользователю возможность добавить данные на эту страницу.

нравится, если они нажимают «текстовое поле», будет текстовое поле в определенном div.

, но теперь, если они добавляют div, а затем внутри этого div, они хотят добавить что-либо, чем это возможно?

Как получить текущий DIV (где моя мышь текущее положение), так что если я выбрать конкретный DIV, который редактируется, чем они могут добавить текстовое поле внутри него в.

проверку fiddle, есть что-то вроде document.activeElement но его не работает.

так как получить текущий div и добавить элемент в этот конкретный div.

Когда моя мышь находится в частности div/form, чем я хочу добавить текстовое поле/h1, следует добавить, в частности, что div/form.

P.S.
Мне нужно получить идентификатор текущей позиции курсора. если мой курсор внутри формы1, то я должен получить form1 и добавить html внутри этого.

Я не могу использовать $(this), потому что это вернет меня туда, где я щелкнул, а не там, где находится моя позиция курсора.

Answer 1

применить это работает

$(document).ready(function(){ 
    $(".addForm").on("click", function(){ 
     var current = $(this);//use $(this) at the place of document.activeElement 
     var myCurrentId = this.id;// here can also use $(this).attr("id"); 
     $(".uiHTML").append("<form id='1' contenteditable='true'></form>"); 
    }); 

    $(".addH1").on("click", function(){ 
     var current = $(this); 
     var myCurrentId = this.id;// here can also use $(this).attr("id"); 
     $(".uiHTML").append("<h1>Hello</h1>"); 
    }); 
}); 

см demo