Как извлечь определенный div из одного файла html и поместить его в другой файл html, используя обычный JavaScript? - PullRequest
Новая
       42

Как извлечь определенный div из одного файла html и поместить его в другой файл html, используя обычный JavaScript?

1 голос
/ 06 марта 2020

У меня есть два html файла с именем homepage.html & dashboard.html на одном уровне в одной папке. Я только хочу получить определенный div, так как в моем основном проекте много div.

Вот код homepage.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Homepage</title>
        <link rel="stylesheet" href="css/homepage.css">
    </head>
    <body>
        <div class="homepage-side-menu">
            <div id="homepage-home">
                <label>Home</label>
            </div>
            <div id="homepage-dashboard">
                <label>Dashboard</label>
            </div>
        </div>
        <div id="homepage-main-view"></div>
        <script src="js/homepage.js"></script>
    </body>
</html>

А вот код dashboard.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Dashboard</title>
        <link rel="stylesheet" href="css/dashboard.css">
    </head>
    <body>
        <div class="dashboard-side-menu"></div>
        <div id="dashboard-main-view"></div>
        <script src="js/dashboard.js"></script>
    </body>
</html>

Я хочу получить только содержимое из div class="homepage-side-menu"> и покажите его под <div class="dashboard-side-menu"></div>, используя простой JavaScript.

Ответы [ 4 ]

1 голос
/ 06 марта 2020

Сначала вы должны обратиться к файлу, который вы хотите использовать. затем вы используете getElementByClass()

, вот как вы импортируете файл html в другой html

<link href="homepage.html" rel="import" />

или используя javascript: 

<script> 
  $(function(){
    $("#addContentFromAnotherHTML").load("homepage.html"); 
  });
</script>

и вы можете посмотреть что-то вроде этого: 

<body> 
 <div id="addContentFromAnotherHTML"></div>
</body>

примерно так: 

 var classData =  document.getElementsByClassName('homepage-side-menu');
0 голосов
/ 06 марта 2020

Существует несколько способов поделиться шаблоном HTML на нескольких страницах

1. jQuery - AJAX load () Метод

$(selector).load(URL,data,callback);

Метод load() загружает данные из URL и помещает возвращенные данные в выбранный элемент.

Подробнее об этом здесь

2. На стороне сервера используется несколько языков программирования на стороне сервера 

<?
php include 'header.php';
?>

Подробнее об этом здесь

3. Использование некоторых инструментов сборки, таких как gulp или grunt или webpack

https://www.npmjs.com/package/file-include-webpack-plugin

https://www.npmjs.com/package/gulp-file-include

4. Использование HTML import

HTML import - захватывающая технология, которая обещает изменить способ создания веб-сайтов. Импорт позволяет включать HTML документы в другие HTML документы.

Подробнее об этом здесь

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

https://blog.teamtreehouse.com/introduction-html-imports

Это рекомендуется, но не работает со старым браузером

0 голосов
/ 06 марта 2020

Используя jQuery, вы можете добавить это на панель инструментов. html: 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>
0 голосов
/ 06 марта 2020

Поскольку html5 вы можете использовать импорт 

<link rel="import" href="/path/to/imports/stuff.html">

В старых браузерах единственным способом является использование javascript (XHR, fetch или Jquery .load

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...