append和prepend是javascript dom方法，非html语法；append在元素末尾插入内容，prepend在开头插入，均作用于dom节点，不支持ie。
HTML里没有append和prepend方法
直接在纯 HTML 中写 append 或 prepend 是无效的——它们不是 HTML 标签或属性，而是 JavaScript DOM API 提供的方法。如果你在 HTML 文件里写了类似 <div append="xxx"></div>，浏览器会忽略它，什么也不会发生。
真正起作用的是 JS 脚本调用元素的 append() 和 prepend() 方法，操作的是已存在的 DOM 节点。
append() 和 prepend() 的实际用法（现代浏览器）
这两个方法属于 Element 接口，必须通过 JS 获取元素后调用。它们接受任意数量的参数：可以是字符串、文本节点、元素节点，甚至 DocumentFragment。
-
append()把内容加在元素的末尾（子节点最后） -
prepend()把内容加在元素开头（子节点最前） - 两者都**不返回新元素，也不替换原有内容，只追加/前置**
- 如果传入的是已存在于 DOM 中的元素，它会被自动从原位置移走，再插入到新位置（即“移动”而非“复制”）
示例：
<div id="container"><p>第一段</p></div>
<script>
const container = document.getElementById('container');
container.append('纯文本', document.createElement('span')); // 文本 + 新 span
container.prepend(document.querySelector('p')); // 把已有 p 移到最前（此时它变成第一个子节点）
</script>
IE 不支持，得用 appendChild() 和 insertBefore() 替代
IE 完全不支持 append() 和 prepend()（包括 IE11）。如果项目还要兼容 IE，不能直接用这两个方法。
-
appendChild(node)等价于append(node)，但只接受单个节点，不支持字符串或多个参数 -
prepend()没有直接等价物，得手动用insertBefore(newNode, firstChild) - 传字符串时需先用
document.createTextNode()或innerHTML（后者有 XSS 风险，慎用）
安全兼容写法示例：
const container = document.getElementById('container');
// append 字符串（兼容 IE）
container.appendChild(document.createTextNode('Hello'));
// prepend 元素（兼容 IE）
const newDiv = document.createElement('div');
newDiv.textContent = '头部';
if (container.firstChild) {
container.insertBefore(newDiv, container.firstChild);
} else {
container.appendChild(newDiv);
}
别混淆 jQuery 的 append()/prepend()
如果你看到别人在 HTML 里写 $('div').append(...)，那是在用 jQuery 库。jQuery 的 append() 和原生的同名方法行为相似，但有关键差异：
- jQuery 版本支持选择器字符串（如
$('div').append('<p>xxx</p>')），会自动解析 HTML；原生append()对字符串不做解析，直接当文本插入 - jQuery 会自动处理 IE 兼容性；原生不会
- jQuery 返回的是 jQuery 对象（可链式调用），原生方法返回
undefined
也就是说：el.append('<b>test</b>') 插入的是纯文本 <b>test</b>，而 $(el).append('<b>test</b>') 插入的是加粗的 test —— 这个区别极易被忽略，尤其在调试渲染结果时。
真正要用好 append() 和 prepend()，关键是分清上下文：是纯 JS、jQuery、还是误以为 HTML 自带这些能力。传参类型、浏览器支持、以及字符串是否被解析，这三点出错频率最高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
