将内容的第一行包装在div中

Question

I have a div with the attribute contentEditable set.

The trouble I am having is that the first line I type does not get wrapped in tags, but the subsequent lines do.

Input

abcd
efgh
ijkl

Result

<div contentEditable="true">
    "abcd"
    <div>efgh</div>
    <div>ijkl</div>
</div>

Answer 1

Try this : get text and children then make editable div empty and wrap text with div (I have added color:red to just know div added) and children.

$(function(){
    $('div[contentEditable="true"]').each(function(){
       var text = $(this).clone().children().remove().end().text();// get text
       var $children = $(this).children();// get children

       //add text and children again
       $(this).empty().append('<div style="color:red;">'+text+'</div>').append($children);
    });
});

Demo

Answer 2

I dont know know what you are asking .but you need result

 $("div[contentEditable=true]").text("abcd");
    $("div[contentEditable]").append("<div>efgh</div><div>ijkl</div>");

DEMO