HTML中XML数据岛如何编辑添加记录？超详细步骤轻松掌握

var xmlDoc = document.getElementById('shopData').XMLDocument;

//

var newShop = xmlDoc.createElement('shop');

var name = xmlDoc.createElement('name');

var addr = xmlDoc.createElement('addr');

var score = xmlDoc.createElement('score');

var tel = xmlDoc.createElement('tel');

//

name.textContent = '新店铺';

addr.textContent = '新地址';

score.textContent = '4.5';

tel.textContent = '135-XXXX-XXXX';

//

newShop.appendChild(name);

newShop.appendChild(addr);

newShop.appendChild(score);

newShop.appendChild(tel);

xmlDoc.getElementsByTagName('shops')[0].appendChild(newShop);

}

点击按钮，页面就会新增一条记录——不过这需要一点JS基础，如果你是新手，可以先从手动改XML开始，熟练了再试这个方法。

我朋友按这些步骤操作后，现在自己就能轻松加新店铺了，上周还跟我说“终于不用每次找你改数据了”——其实XML数据岛真的不难，只要摸透“数据存在XML里，HTML挂钩显示”的逻辑，就能玩转。

你要是试了这些方法，不管是成功还是遇到问题，都欢迎回来留言告诉我——比如你有没有遇到路径错的情况？或者加新记录时有没有漏闭合标签？咱们一起聊聊。毕竟实操才是最能学东西的，赶紧去试试吧！

XML数据岛到底是什么？和后端数据库有啥区别呀？

XML数据岛其实就是把XML文件里的数据“嵌”到HTML页面里，让HTML不用发请求给服务器就能直接读数据、显示数据。打个比方，就像你把小吃店的名字、地址写在一个小本子（XML文件）里，HTML页面像个“显示器”，直接把小本子里的内容拉出来拼成列表或表格给用户看。

它和后端数据库（比如MySQL）的区别挺清楚的——要是做本地页、静态演示页或者小流量静态站，用XML数据岛就够了，不用搭服务器、写接口，改数据只用动XML文件；但如果是动态网站、大流量站点或者需要用户提交表单的页面，那还是得用后端数据库，毕竟XML数据岛没法处理复杂的用户交互。

HTML和XML关联的时候，容易踩哪些坑呀？

最容易踩的坑有两个：一是标签的id和表格的datasrc属性没对应上，比如你XML标签id写的是“shopList”，但表格里datasrc还是“#shopData”，这时候页面肯定显示空表格；二是XML文件的路径错了，比如XML存在“data”文件夹里，你却写src="https://www.mayiym.com/shops.xml"，得改成“data/shops.xml”才行。我朋友之前就踩过id不对应的坑，改了半天HTML没反应，后来才发现是id和datasrc没对上。

编辑已有记录时，直接改XML就行？真不用动HTML吗？

对呀！因为XML数据岛是“数据和显示分离”的——XML文件存的是真数据，HTML只是负责把数据“展示”出来。比如你想把“张记油条”的评分从4.6改成4.7，直接打开XML文件，找到对应的4.6改成4.7，保存之后刷新HTML页面，评分就变了，完全不用碰HTML里的表格代码。我朋友一开始还傻兮兮改HTML表格，结果改了半天没反应，后来才明白这个逻辑。

添加新记录时，为什么有时候加了但页面没显示？

多半是两个原因：要么是你把新的节点加错位置了——必须得放到父节点里面，要是不小心放到外面，XML根本不认这个节点；要么是XML语法错了，比如标签没闭合（比如写了李阿姨豆浆，漏了）或者属性没加引号（比如应该写成）。我朋友之前加新店铺时，就把节点放到了外面，结果页面没反应，调整位置后才显示出来。

想用JavaScript在页面上直接加记录，需要注意什么呀？

首先得说，这个方法是可选的，适合有点JS基础的同学。步骤大概是这样的：先通过document.getElementById拿到XML数据岛的文档对象（比如var xmlDoc = document.getElementById('shopData').XMLDocument），然后创建新的节点和它的子节点（比如、），接着给子节点设内容（可以用输入框的值代替固定内容，更灵活），最后把新节点加到父节点里。要是你刚入门，先手动改XML就行，等熟练了再试JS操作~