HTML5 'Import' failed

aks

I need to display a child html page inside the main html page using HTML Import. I tried a sample but it seems to be failing on link.import.querySelector(). The sample code I tried is mentioned below: Can you help me to resolve the problem. Main.html

<!DOCTYPE html>
<html>
<head>
<link rel="import" href="Child.html">
</head>
<body>
<button id="button1" onclick="onclick">Button1</button>
<div id="ChildContainer" />
</body>
<script>
button1.onclick = function ()
{
alert("Before reading imported files.");
var link = document.querySelector('link[rel="import"]');

    alert("Before importing Child.");
    var template = link.import.querySelector('Child');

    alert("Before cloning contents of Child.");
    var clone = document.importNode(Child.content, true);

    alert("Before setting the child to ChildContainer.");
    document.querySelector('#ChildContainer').appendChild(clone);

};
</script>

</html>

Child.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="Child">
<h3>Sample Text</h3>
</div>
</body>
</html>

aks

Kornfeld Eliyahu Peter

I'm sorry to tell you but you have to start to learn HTML/JavaScript from the very beginning, as the place here is to small to explain you all the mistakes (logical and technical) you did in this code... Some probably can write you the proper code, but that will take you nowhere as you clearly do not understand HTML... :((

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

aks

Can any one help me to solve this issue?

aks