Как вставить на страницу часть другой html-страницы?

Question

Ситуация: на HTML-страницу нужно вставить один или несколько фрагментов с другой страницы. Нашел js, который позволяет вставить страницу целиком, но мне нужно вставить только фрагмент, например, поместить в DIVы нужный фрагмент и с помощью js-запроса отображать только содержимое этих DIVов. Подскажите, пожалуйста, как это реализовать?

<html>
<head>
    <title>test </title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="external_page1">
        <!-- here goes the content of the external_page1 -->

    </div>
    <div id="external_page2">
        <!-- here goes the content of the external_page2 -->

    </div>
    <script>
    $(document).ready(function(){
        $.get('external_page1.html',function(data){ $('#external_page1').html(data);});
        $.get('external_page2.html',function(data){$('#external_page2').html(data);});

        // you can also use $.post method instead of $.get 

        // $.post('external_page1.html',function(data){ $('#external_page1').html(data);});
        // $.post('external_page1.html',function(data){$('#external_page2').html(data);});

    });
    </script>
</body>
</html>

пример

Answer 1

Как то так можно сделать

<html>
  <head>
    <title>test </title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="external_page1">
        <!-- here goes the content of the external_page1 -->

    </div>
    <div id="external_page2">
        <!-- here goes the content of the external_page2 -->

    </div>
    <script>
    $(document).ready(function(){
        $.get('external_page1.html',function(data){
          //data - полученные данные
          let div = document.createElement('div');
          // div - контейнер, для данных
          div.innerHTML = data;

          
          let $div = $(div);
          // ищем в контейнере нужный элемент
          let find_el = $div.find('.some_class');

          // если искомый элкмент найден вставляем его
          if(find_el)
            $('#external_page1').append(find_el);
        });        
    });
    </script>
  </body>
</html>

БЛОГ НА HUSL

Как вставить на страницу часть другой html-страницы?

Ответы (1 шт):