【js】Document.importNode()

以往我都是用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);
	}

来自這裏這裏

Leave a Comment