Hello I can not understand why I have with this code, the script uploads the document, I downloadable content comes separately from id = "main-page".
<head> <title>Личный сайт-блог</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <meta name="descritpion" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Подключение стилей --> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="import" href="intro.html"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet"> </head> <body> <section id="main_page"> <article> <div class="left_side"> <div class="me_left_bar"> <div class="photo"> <picture> <img src="img/my_photo.png"> </picture> </div> <div class="me_name_info"> <p class="my_name about_info_bold">МММА</p> <p class="my_job about_info_light">HTML верстальщик</p> </div> <div class="social"> <a href="https://vk.com/1123"><i class="fa fa-vk bw" aria-hidden="true"></i></a> <a href="https://www.facebook.com/1123"><i class="fa fa-facebook-official bw" aria-hidden="true"></i></a> <a href="https://www.instagram.com/11123"><i class="fa fa-instagram bw" aria-hidden="true"></i></a> </div> </div> </div> <div class="top_side"> <div class="me_right_bar nav"> <div class="nav_menu"> <div class="navigation-desktop"> <span class="tab"><i class="fa fa-user" aria-hidden="true"></i>Обо мне</span> <span class="tab"><i class="fa fa-file-text-o" aria-hidden="true"></i>Моё резюме</span> <span class="tab"><i class="fa fa-suitcase" aria-hidden="true"></i>Моё портфолио</span> <span class="tab"><i class="fa fa-comments-o" aria-hidden="true"></i>Блог</span> <span class="tab"><i class="fa fa-street-view" aria-hidden="true"></i>Связаться со мной</span> </div> </div> </div> </div> <div id="middle_side"> <script> var link = document.querySelector('link[rel=import]'); var content = link.import.querySelector('.full_info'); document.body.appendChild(content.cloneNode(true)); </script> </div> </article> </section> <script src="https://use.fontawesome.com/0279959ac4.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> 
It should be like this:
Everything will work quietly if div.full_info fit in exactly where the script is written. Help to understand :)
This is the code of the file being uploaded ...
<div class="full_info row"> <div class="about_me_title title">Обо мне</div> <div class="about_me"> <div class="about_me_full"> <ol> <li class="about_info"><span class="about_info_bold">Меня величают: </span><br><span class="about_info_light"></span></li> <li class="about_info"><span class="about_info_bold">Дата рождения: </span><br><span class="about_info_light"></span></li> <li class="about_info"><span class="about_info_bold">Специальность: </span><br><span class="about_info_light">Программист</span></li> <li class="about_info"><span class="about_info_bold">Мой сайт: </span><br><span class="about_info_light"></span></li> <li class="about_info"><span class="about_info_bold">Email: </span><br><span class="about_info_light"></span></li> <li class="about_info"><span class="about_info_bold">Skype: </span><br><span class="about_info_light"></span></li> </ol> </div> <div class="about_me_exp"> <div class="exp_html"> <span class="exp_html_txt">Уровень владения языком HTML</span> <progress id="user-progress-html" value="0" max="100"></progress> <span id="user-progress-html-num"></span> </div> <div class="exp_php"> <span class="exp_php_txt">Уровень владения языком PHP</span> <progress id="user-progress-php" value="0" max="100"></progress> <span id="user-progress-php-num"></span> </div> <div class="exp_css"> <span class="exp_css_txt">Уровень владения CSS</span> <progress id="user-progress-css" value="0" max="100"></progress> <span id="user-progress-css-num"></span> </div> <div class="exp_js"> <span class="exp_js_txt">Уровень владения JavaScript</span> <progress id="user-progress-js" value="0" max="100"></progress> <span id="user-progress-js-num"></span> </div> </div> </div> <div class="about_me_inform"> <div class="about_me_title2 title">Я HTML разработчик</div> <div class="about_me_text about_info_light"> <p>Donec pulvinar feugiat dui vel egestas. Nulla sit amet risus risus. Nulla auctor libero vitae erat posuere, sit amet viverra turpis lobortis. Nullam eleifend cursus tellus a egestas. Donec at elementum orci. Lorem ipsum dolor.</p> <p>Aliquam ut purus ex. Aliquam interdum convallis gravida. Curabitur malesuada cursus felis, non molestie odio consequat id. Donec at elementum orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae molestie eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec pulvinar feugiat dui vel egestas. Nulla sit amet risus risus. Nulla auctor libero vitae erat posuere, sit amet viverra turpis lobortis. Nullam eleifend cursus tellus a egestas. </p> </div> </div> <div class="about_me_work"> <div class="about_me_title3 title">Что я создаю</div> <div class="about_me_functions"> <ol> <li class="about_me_skills"><i class="fa fa-android" aria-hidden="true"></i><p class="about_info_bold">Applications</p><p class="about_info_light none">Lorem ipsum dolor.</p></li> <li class="about_me_skills"><i class="fa fa-desktop" aria-hidden="true"></i><p class="about_info_bold">Web Design</p><p class="about_info_light none">Lorem ipsum dolor.</p></li> <li class="about_me_skills"><i class="fa fa-picture-o" aria-hidden="true"></i><p class="about_info_bold">Illustrations</p><p class="about_info_light none">Lorem ipsum dolor.</p></li> <li class="about_me_skills"><i class="fa fa-dashcube" aria-hidden="true"></i><p class="about_info_bold">Development</p><p class="about_info_light none">Lorem ipsum dolor.</p></li> <li class="about_me_skills"><i class="fa fa-search" aria-hidden="true"></i><p class="about_info_bold">Seo Optimization</p><p class="about_info_light none">Lorem ipsum dolor.</p></li> <li class="about_me_skills"><i class="fa fa-hourglass-half" aria-hidden="true"></i><p class="about_info_bold">Speed Support</p><p class="about_info_light none">Lorem ipsum dolor.</p></li> </ol> </div> </div> <div class="footer"> <span class="about_info_light">Copyright © 2017 All rights reserved</span> </div> </div> 