• 创建新节点的方法：
    • document.createElement(tag) — 用给定的标签创建一个元素节点，
    • document.createTextNode(value) — 创建一个文本节点（很少使用），
    • elem.cloneNode(deep) — 克隆元素，如果 deep==true 则与其后代一起克隆。

  • 插入和移除节点的方法：

    • node.append(...nodes or strings) — 在 node 末尾插入，
    • node.prepend(...nodes or strings) — 在 node 开头插入，
    • node.before(...nodes or strings) — 在 node 之前插入，
    • node.after(...nodes or strings) — 在 node 之后插入，
    • node.replaceWith(...nodes or strings) — 替换 node。
    • node.remove() — 移除 node。

    文本字符串被“作为文本”插入。

  • 这里还有“旧式”的方法：

    • parent.appendChild(node)
    • parent.insertBefore(node, nextSibling)
    • parent.removeChild(node)
    • parent.replaceChild(newElem, node)
  • 这些方法都返回 node。
  • 在html中给定一些 HTML，elem.insertAdjacentHTML(where, html)会根据where的值来插入它：
    • "beforebegin" — 将 html 插入到 elem 前面，
    • "afterbegin" — 将 html 插入到 elem 的开头，
    • "beforeend" — 将 html 插入到 elem 的末尾，
    • "afterend" — 将 html 插入到 elem 后面。

另外，还有类似的方法，elem.insertAdjacentText 和 elem.insertAdjacentElement，它们会插入文本字符串和元素，但很少使用。

  • 要在页面加载完成之前将 HTML 附加到页面：
    • document.write(html)
  • 页面加载完成后，这样的调用将会擦除文档。多见于旧脚本。

练习题

1. 创建一个列表

编写一个接口，根据用户输入创建一个列表（list）。
对于每个列表项：

  1. 使用 prompt 向用户询问列表项的内容。
  2. 使用用户输入的内容创建 <li>，并添加到 <ul>。
  3. 重复以上步骤，直到用户取消输入（按下 Esc 键，或点击 prompt 弹窗的 CANCEL 按钮）。

所有元素应该都是动态创建的。
如果用户输入了 HTML 标签，那么这些内容应该被视为文本进行后续处理。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   <h1>Create a list</h1>
  6.   <script>
  7.     let ul = document.createElement('ul');
  8.     document.body.append(ul);
  10.     while (true) {
  11.       let data = prompt("请输入", "");
  13.       if (!data) {
  14.         break;
  15.       }
  17.       let li = document.createElement('li');
  18.       li.textContent = data;
  19.       ul.append(li);
  20.     }
  21.   </script>
  23. </body>
  24. </html>

2. 从对象创建树

  1.        let data = {
  2.         "Fish": {
  3.             "trout": {},
  4.             "salmon": {}
  5.         },
  7.         "Tree": {
  8.             "Huge": {
  9.             "sequoia": {},
  10.             "oak": {}
  11.             },
  12.             "Flowering": {
  13.             "apple tree": {},
  14.             "magnolia": {}
  15.             }
  16.           }
  17.         };
  19.     function createTreeDom(obj){
  20.       // Object.keys得到由key组成的数组
  21.       if(!Object.keys(obj).length) return
  22.       let ul = document.createElement('ul')
  23.       for(key in obj){
  24.           let li = document.createElement('li')
  25.           li.innerHTML = key
  27.           let childUl = createTreeDom(obj[key])
  28.           if(childUl){
  29.               li.append(childUl)
  30.           }
  32.           ul.append(li)
  33.       }
  35.       return ul
  36.     }
  38.     function createTree(container, obj){
  39.         container.append(createTreeDom(obj))
  40.     }
  42.     createTree(document.body, data)