div contenteditable="true"でユーザーに入力してもらった値の渡し方


うまくいかないので教えてください。

まずこの枠内にユーザーに文字や画像を入力してもらいます。

[code]

    <div id="editor" contenteditable="true"></div>
    
[/code]

入力後このボタンをユーザーに押してもらうことをトリガに

[code]

    <input type="buttun" onclick="add()">
    
[/code]

jQueryを実行して、

[code]

    function add() {
    var editor = $("#editor").val();
    $.mobile.changePage($("#list-page"));
    $("#list").append("<li>” + "<p>" + editor + "</p></li>")
    $("#list").listview('refresh');
    };
    
[/code]

以下のリストビューにユーザーが入力した内容を反映

[code]

    <div data-role="page" id="list-page">
    <ul data-role="listview" data-inset="true" id="list"></ul>
    </div>
    
[/code]

という流れにしたいのですが、ボタンを押しても先に進めずに困っています。  
上記のコードに何か間違いはあるでしょうか。




[jQueryのリファレンス](http://api.jquery.com/val/)には`div`に`.val()`が使えるとは書いていません。おそらく、`.html()`
などを使う必要があります。

