javascript - 如何将一个div插入到另一个div的内容中？

Question

如何在另一个可编辑内容的 div 的内容中插入一个 div？父 div 是一个内容可编辑的 div，它包含字符串内容。当我在光标位置输入“@”时，我想插入另一个内容可编辑的 div。

例如，

 <div id="target" class="text-area" contenteditable='true'>This text can be anything... how to insert a div when i type start typing @... </div>

我想在输入“@”时插入另一个 div 吗？我怎样才能实现这个目标？

这是我尝试过的JSBIN

请帮助我。提前致谢

Answer 1

这似乎对我有用。我刚刚添加了 $(this).append(...)

$("#target").keydown(function(e) {

//  console.log(e, String.fromCharCode(e.which));

  if(e.which === 50 && e.shiftKey === true ){
      if(flag === true){
        flag = false;      
        return;
      }      
      flag = true;
    $(this).append('<div id="target2" contenteditable="true">New Div</div>');
      //console.log($('#target'),$('#target').prop('selectionStart'));
    } 
});