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

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

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

<div id="editor" contenteditable="true"></div>

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

<input type="buttun" onclick="add()">

jQueryを実行して、

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

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

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

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