以往我都是用cloneNode(true)来複製一個模板,但是今日我找到了另一個更為優美的辦法,使用<template/>跟Document.importNode()来完成。
示例一:
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
示例二:
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var tbody = document.querySelector("tbody");
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var clone = template.content.cloneNode(true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = template.content.cloneNode(true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
示例三,拿到本頁面的所有元素:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", '');
xmlhttp.send();
xmlhttp.onload = function () {
let temp = document.createElement('template');
temp.innerHTML = xmlhttp.responseText;
console.log(temp.content);
}