const $$ = document.querySelector.bind(document);
// 原生（旧）
const link = document.createElement("a");
link.setAttribute("href", "/home");
link.className = "active";
link.textContent = "原生首页";
$$(".container").appendChild(link);

// jQuery
$(".container").append('<a href="/home" class="active">jQuery首页</a>');

// 原生（新）
// 插入 HTML 字符串
$$(".container").insertAdjacentHTML(
  "beforebegin",
  '<a href="/home" class="active">insertAdjacentHTML 首页</a>'
);

// 'beforebegin': 元素之前
// 'afterbegin': 元素内，位于现存的第一个子元素之前
// 'beforeend': 元素内，位于现存的最后一个子元素之后
// 'afterend': 元素之后

let link2 = document.createElement("a");
link2.setAttribute("href", "/home");
link2.className = "active";
link2.textContent = "insertAdjacentElement link2";
// 插入HTML元素
$$(".container").insertAdjacentElement("afterbegin", link2);
// 插入文本
$$(".container").insertAdjacentText("beforeend", "cool!");
$$(".container").insertAdjacentHTML("afterend", "<p>Udacity</p>");