獲取當前div並添加html

Question

我在有可編輯內容的頁面上創建。

我想讓用戶有機會在該頁面上添加數據。

喜歡，如果他們點擊「文本框」，就會在某些div中出現文本框。

但現在如果他們添加div然後在該div內，他們想要添加任何東西而不是它的可能性？

如何獲取當前格（我的鼠標當前位置），所以如果我選擇特定的div是可編輯的，比他們可以在裏面添加它的文本框。

結賬fiddle，有類似document.activeElement，但其不工作。

所以如何獲得當前div並將元素添加到該特定div中。

當我的鼠標特別是div/form比我想要添加的文本框/ h1應該特別添加div/form。

P.S.
我需要獲取當前光標位置的ID。 如果我的光標在form1裏面比我應該得到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