agregar tags html dinamicamente en un div con html5 y javascript puro - sin plugins

Si queremos dejar de usar los a veces pesados wyswyg, o textareas con opciones de edicion de texto que muchas veces ni necesitamos, les presento el codigo con que lo hice posible :

html 

<input type="button" value="Paste HTML" onclick="cargar();">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

javascript 

function pasteHtmlAtCaret(html) {

    var sel, range;

    if (window.getSelection) {

        // IE9 and non-IE

        sel = window.getSelection();

        if (sel.getRangeAt && sel.rangeCount) {

            range = sel.getRangeAt(0);

            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is

            // non-standard and not supported in all browsers (IE9, for one)

            var el = document.createElement("div");

            el.innerHTML = html;

            var frag = document.createDocumentFragment(), node, lastNode;

            while ( (node = el.firstChild) ) {

                lastNode = frag.appendChild(node);

            }

            range.insertNode(frag);

            

            // Preserve the selection

            if (lastNode) {

                range = range.cloneRange();

                range.setStartAfter(lastNode);

                range.collapse(true);

                sel.removeAllRanges();

                sel.addRange(range);

            }

        }

    } else if (document.selection && document.selection.type != "Control") {

        // IE < 9

        document.selection.createRange().pasteHTML(html);

    }

}

function cargar(){

    var inn = '<iframe width="560" height="315" src="//www.youtube.com/embed/tlUVVGCdOiQ" frameborder="0" allowfullscreen></iframe>';

document.getElementById('test').focus(); 

    pasteHtmlAtCaret(inn);

}

ver demo aqui http://jsfiddle.net/fenve/8WLNY/