HTMLالوسم <template>

<script>
    // سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح يدعم الوسم
    if (document.createElement("template").content) {
        document.write("Your browser supports the template tag");
    }
    // سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح لا يدعم الوسم
    else {
        document.write("Your browser doesn not supports the template tag");    
    }
</script>

<!-- cloneTemplateContent() عند النقر على هذا الزر سيتم استدعاء الدالة 
<template> التي تقوم بإنشاء نسخة من المحتوى المجهز بداخل الوسم -->
<button onclick="cloneTemplateContent()">Clone template content</button>

<!-- هنا قمنا بتجهيز المحتوى الذي سيتم إنشاء نسخة منه عند النقر على الزر -->
<template id="demo">
    <h2>The Template Tag</h2>
    <p>The temaplte tag is used to render the content after the
    page is loading.</p>
    <hr>
</template>

<!-- التي تقوم بإنشاء و إظهار cloneTemplateContent() هنا قمنا بتعريف الدالة 
عندما يتم استدعاءها <template> نسخة من المحتوى الموضوع بداخل الوسم -->
<script>
    function cloneTemplateContent() {
        if (document.createElement("template").content) {
            var temp = document.getElementById("demo");
            var clon = temp.content.cloneNode(true);
            document.body.appendChild(clon);
        }
        else {
            alert("Oops.. Your browser doesn not supports the template tag!");    
        }
    }
</script>