在JavaScript中使用appendChild()方法向页面元素中追加子对象和removeChild()方法从页面中移除对象，先看如下的HTML代码：
<div id="nw"></div>
<span id="ch"></span>
</body>
一共有两个页面元素，现在我们想把id="ch"的span元素追加到div中，我们可以使用appendChild()方法来完成，如下：
document.getElementById('nw').appendChild(document.getElementById('ch'));
如果你使用的浏览器是火狐或Chrome，那么查看页面元素，你会发现span元素是div元素的子对象了，如果你用的不是火狐或Chrome，那么可以通过css来检测span现在是不是div元素的子对象。
现在再来介绍如何用removeChild()移除对象
<div id="nw"><span id="ch"></span></div>
</body>
div元素中包含子元素span，我们使用removeChild()将span标签移除
<
在JavaScript中使用appendChild()方法向页面元素中追加子对象和removeChild()方法从页面中移除对象，先看如下的HTML代码：&lt;body&gt;&lt;div id="nw"&gt;&lt;/div&gt;&lt;span id="ch"&gt;&lt;/span&gt;&lt;/body&gt;
这一点，的确是这样的，但我觉的这个机制很奇怪
就不能是复制么，即1成为了2的子
元素
，然后1仍然在那里。
不是说需求一般是这样。恰恰相反，需求的确一般都是要删除原来的，比如这个案例
但是从逻辑上想想都是：先是append了，然后我们自己去删除掉原来的1
元素
现在倒好，append还有自带有remove功能。
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的
元素
createTextNode() //创建一个文本节点
2）
添加
、
移除
、替换、插入
appendChild
() //
添加
removeChild
() //
移除
replaceChild() //替换
insertBefore() //插入
在写东西的时候用
appendChild
为li标签两次追加相同内容，结果却
页面
只出现了一个li标签
appengChild是把一个
元素
（对象）追到到另一个
元素
上，但是这个追加其实是"剪切"的意思。也就是说，如果追加同一个
元素
（对象），实际上只是追加了一个
元素
，这就是我所出现的那个问题。
createDocumentFragment() //创建一个DOM片段
createElement_x() //创建一个具体的
元素
createTextNode() //创建一个文本节点
2）
添加
、
移除
、替换、插入
appendChild
() //
添加
removeChild
() //
移除
replaceChild() //替换
insertBefore() //
appendChild
()用于向childNodes列表的末尾
添加
一个节点。更新节点后，
appendChild
()返回新增的节点。
下面的parentNode代表父节点，newNode代表新节点，returnedNode代表
appendChild
返回的节点
var returnedNode = parentNode.
appendChild
(newNode);
1. 设计
页面
布局：包括菜单、菜品列表、购物车等
元素
。
2. 编写
JavaScript
代码：主要是用来
添加
菜品到购物车、计算总价、提交订单等功能。具体实现可以参考下面的示例代码：
// 定义全局变量
var cart = []; // 购物车数组，保存已选择的菜品
var menu = [ // 菜单数组，保存所有可选的菜品
{name: '牛肉面', price: 15},
{name: '鸡蛋炒饭', price: 10},
{name: '番茄炒蛋', price: 8},
{name: '红烧肉', price: 20}
// 将菜品
添加
到购物车中
function addToCart(index) {
var dish = menu[index];
cart.push(dish);
updateCart(); // 更新购物车显示
// 从购物车中删除菜品
function removeFromCart(index) {
cart.splice(index, 1);
updateCart(); // 更新购物车显示
// 计算购物车中的总价
function calculateTotalPrice() {
var total = 0;
for (var i = 0; i < cart.length; i++) {
total += cart[i].price;
return total;
// 更新购物车显示
function updateCart() {
var cartList = document.getElementById('cart-list');
var totalPrice = document.getElementById('total-price');
// 先清空原有的内容
cartList.innerHTML = '';
// 重新生成购物车列表
for (var i = 0; i < cart.length; i++) {
var item = document.createElement('li');
var name = document.createElement('span');
var price = document.createElement('span');
var removeBtn = document.createElement('button');
name.innerText = cart[i].name;
price.innerText = cart[i].price;
removeBtn.innerText = '删除';
removeBtn.onclick = function() { removeFromCart(i); };
item.
appendChild
(name);
item.
appendChild
(price);
item.
appendChild
(removeBtn);
cartList.
appendChild
(item);
// 更新总价显示
totalPrice.innerText = calculateTotalPrice();
// 提交订单
function submitOrder() {
if (cart.length === 0) {
alert('您还没有选择任何菜品！')
return;
var total = calculateTotalPrice();
alert('您选择的菜品总价为：' + total + '元');
// TODO：将订单发送到服务器处理
3. 在HTML
页面
中引入
JavaScript
文件，并在需要的地方调用相关函数即可。
以上代码只是一个简单示例，实际应用中可能需要增加更多的功能，如搜索菜品、修改订单等。同时，需要注意保护用户隐私和数据安全，避免出现重复提交订单、SQL注入等问题。
