13、jQuery 技术实战：菜单恢复与怪物混搭应用开发

jQuery 技术实战：菜单恢复与怪物混搭应用开发

1. 菜单恢复功能实现

在进行网页开发时，有时需要实现菜单恢复的功能。比如，将之前移除或替换的菜品重新放回菜单中。以下是具体的操作步骤和相关技术点：

1.1 保存和移除菜品元素

首先，我们需要将肉类菜品元素保存起来，并将其从 DOM 中移除，同时添加豆腐菜品元素。代码如下：

$(".meat").after("<li class='tofu'><em>Tofu</em></li>");
$m = $(".meat").detach();

上述代码中， $(".meat").after() 方法在每个肉类菜品元素后面添加了一个豆腐菜品元素。 $m = $(".meat").detach() 则将所有肉类菜品元素从 DOM 中移除，并将它们保存到变量 $m 中。

1.2 替换特定菜品

我们需要将包含波多贝罗蘑菇的菜品替换为汉堡。可以使用 replaceWith 方法来实现：

$(".portobello").replaceWith("<li class='hamburger'>Hamburger</li>");

此代码会选择所有类名为