I am beginner in web development
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 please correct me.

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>