javascript - execCommand insertHtml，outer div没有插入为什么？

Question

为什么不插入 DIV 而只插入 IMG ？

$(document).ready(function() {

    $(document).on('click', '#insertImage', function(){

        /*
        Why is the DIV not inserted ?
        */
         var item = "<div class='resizable'><img src='http://www.rockiesventureclub.org/wp-content/uploads/2013/02/flower-icon.png'></div>";
         document.execCommand('insertHTML', false,item);


    })
});

见：http: //jsfiddle.net/daslicht/gU2jP/#base

Answer 1

既然你已经用过了，为什么不用 jQuery 做呢？

http://jsfiddle.net/gU2jP/5/

var _$div = $('<div>'),
    _$img = $("<img class='resizeable' id='myImg' src='http://imperavi.com/img/library.jpg' />");

_$div.append(_$img);
$('body').append(_$div);

Answer 2

问题的背景如下：

我只是希望能够使添加的图像向左或向右浮动。由于 jQueryUI 会自动在每个可调整大小的项目周围添加一个 wrapper-div，我认为我需要以某种方式手动添加它以便为其分配一个 id。

Freenode 上的 doug65536 帮助我创建了这个解决方案，而无需手动创建额外的 div：

我们还发现 Fiddle 在 safari 中无法正常工作

$(document).on('click', '#insertImage', function () {

    document.execCommand('insertHTML', false,
        "<img class='resizeable' id='myImg' src='http://imperavi.com/img/library.jpg'>");


    $(".resizeable").resizable({
        aspectRatio: true
    }); //just a try here

    $('#myImg').parent().css({
        'float':'left',
        'margin':'15px'                     
    });
})

http://jsfiddle.net/daslicht/6cGbQ/

非常感谢 ！