在使用 jQuery 操作文檔對象模型（DOM）時，我們經常需要添加、刪除或修改 HTML 元素。而在實際編碼中，往往需要在添加新元素之前先進行一些操作，比如數據處理、動態生成元素等。這時，jQuery 的 before 和 append 方法就可以派上用場了。

before 方法使得我們可以在元素之前添加新元素或內容。語法如下：

$(selector).before(content)

其中，selector 是要添加元素的位置，content 是要添加的新元素或內容。例如：

$("p").before("
標題
");

這段代碼會在所有 p 元素之前添加一個 h2 標題。注意，before 方法會在匹配的元素之前添加元素，而不是替換它們。

而 append 方法則是在選定元素內部的末尾添加新元素或內容。語法如下：

$(selector).append(content)

其中，selector 是要添加元素的位置，content 是要添加的新元素或內容。例如：

$("ul").append("
列表項
");

這段代碼會在所有 ul 元素內部的末尾添加一個新的列表項。注意，append 方法會將新元素添加到匹配的每個元素的末尾。

綜上，before 和 append 方法可以在 jQuery 操作 DOM 中起到非常重要的作用，使得我們可以更方便地修改和添加 HTML 元素，為頁面的交互體驗提供更多的可能性。