我正在创建一个写书网站，大部分是php。我有一个jQuery函数，当点击“新章节”按钮时，它会触发一个AJAX函数以及一些其他JS/jQuery事件。这些事件的一部分是它应该focus()我的光标到<div>的末尾，然后 * focus将光标移到它的末尾。
不管出于什么原因，在append输入信息后，它会将光标移到<div>的开头
HTML语言

<section>
    <aside>
        <h3>Table of Contents</h3>
        <ul id='toc_base'><?php json_toc($meta); ?></ul>
    </aside>
    <article>
        <div contenteditable='false' id='metadata'>
            <?php
            $bookTitle = htmlspecialchars($bookTitle);
            $author = htmlspecialchars($meta->book->metadata->author);
            $startyear = htmlspecialchars($meta->book->metadata->startyear);
            $isbn = ($meta->book->metadata->isbn != "" && $meta->book->metadata->isbn != null)
                ? htmlspecialchars($meta->book->metadata->isbn)
                : "Not Listed";
            $endyear = ($meta->book->metadata->endyear != "" && $meta->book->metadata->endyear != null)
                ? htmlspecialchars($meta->book->metadata->endyear)
                : "TBD";

            echo "Title: $bookTitle | Written By: $author | ISBN: $isbn<br />Start Year: $startyear | End Year: $endyear";
            ?>
        </div>
        <nav style='grid-column: 1 / span 10'>
            <button style='font-weight:bold' id='bold'>B</button>
            <button style='font-style:italic' id='italic'>I</button>
            <button style='text-decoration:underline' id='underline'>U</button>
            &nbsp;
<!-- BUTTON IS HERE -->
            <button style='font-weight:bold' onclick='addChapter()'>Chapter Title</button>
<!-- BUTTON ENDS HERE -->
            <button class='tooltip'>
                <i class="fa-sharp fa-solid fa-person-circle-plus"></i>
                <span class='tooltiptext'>Add new character to the panel on the right.</span>
            </button>
            &nbsp;
            <button class='tooltip' onclick='autosave()'>
                <i class="fa-sharp fa-solid fa-floppy-disk"></i>
                <span class='tooltiptext'>Be like Jesus - Save!</span>
            </button>
            &nbsp;
            <button class='tooltip'>
                <i class="fa-sharp fa-solid fa-database"></i>
                <span class="tooltiptext">Edit metadata such as author information, and ISBN.</span>
            </button>
            <div id='update'>...Saved...</div>
        </nav>
<!-- CONTENT IS HERE -->
        <div contenteditable='true' id='content' type='text' autocomplete='off'></div>
<!-- CONTENT ENDS HERE -->
    </article>
    <aside>
        <h3>Characters</h3>
        <ul id='char_base'><?php json_characters($meta); ?></ul>
    </aside>
</section>

jQuery和JS

function addChapter() {
    var end;
    let chapter = prompt("New Chapter Name?");
    if (chapter != null) {
        $.get("editor.php?newchapter=" + chapter, function (data, status) {
            $("#toc_base").html("<li>" + chapter + "</li>");
            $("#content").append("[b]" + chapter + "[/b]\n\n");

            var div = document.getElementById('content');
            div.focus();
        });
    }
}

错误/例外

页面或console_log上未显示错误或异常。
"我的所作所为"
我确实检查了一些SO问题，它们似乎都说只使用focus()，我已经（以许多不同的方式）使用了它。我在timeout函数中尝试了它，它做了与上面完全相同的事情。我在jQuery中做了它：$("#update").focus();，且无差异。

浏览器

Chrome浏览器版本107.0.5304.62（正式版本）（64位）
"我希望避免的事"
如果可能的话，我想避免使用textarea。当使用php时，它可能会产生额外的white-space，这很烦人。如果有必要的话，我可以这样做，但我想远离它。

对正在发生的事情做一个小小的改变

如果我在一次输入章节标题后手动将光标移到末尾，然后再添加第二个，它会聚焦在最近的append的开头。