How to add that block?

Question

JavaScript

I'm trying to make it so that by clicking on a link, a certain block from a separate .html file is added to its parent. Everything seems to work out, but not a separate block is added, but completely everything that is.
The code is like this:

$('.list-item a').click(function (){
    event.preventDefault();
    var link = $(this);
    var here = link.parent();
    var target = link.attr('href');
    $.get('programs/programs.html',function(data){
    $(target).html( data );
    here.append(data);
    
    });
  });

And another clarification - how to remove everything that was added with a new click?

Answer 1

Replace

$.get('programs/programs.html', function(data) {
  $(target).html(data);
  here.append(data);
});

on the

$.get('programs/programs.html', function(data) {
  here.append($(data).find(target));
});

With this approach, you can easily have duplicate IDs, for example, when you click on the same link again.

Answer 2

From your code, you can see that when you click on the link, the ENTIRE programs/programs.html file will be loaded. There is no code that highlights its block.
Option 2
1. Parser - which, by regular expression, will select a block. For example, frame the code

<!-- CODE BLOCK NAME --> 

<!-- /CODE BLOCK NAME -->

2. Refer to php which will give the requested.
Removing downloaded.
Frame a div, span, .... loaded with anything containing class="loaded" (for example). When you click on the button, delete all loaded elements.

Answer 3

1. The first option (the easiest) is to create a <script id="tab_name" type="text/html"> block in programs.html, load programs.html with $.get(...) and parse the contents of the block, for example, with data.indexOf('<script id="tab_name" type="text/html">') and data.indexOf('</script>'). There are other options for parsing (see other answers). Requires CORS or the same domain.
   PS. The <script type="text/html"> block will not be rendered in programs.html when opened directly. Also, possible syntax errors inside <script> will not affect the correctness of programs.html.
   Additionally: this is not relevant to the question, but the described method is also convenient in that it allows you to process data using a template engine before output. For example, you can print <div>test</div> 10 times like this (the syntax will depend on the template engine you choose):

   <%for (var i = 0; i < 10; i++) {%> <div>test</div> <%}%>

   
   
2. The second option is to load programs.html as an iframe and use postMessage to pass #tab_name content from programs.html using document.getElementById('tab_name').innerHTML. Doesn't require CORS. This solution can also be combined with a template engine.
   
3. The third option is html import, but it is not supported in older browsers habrahabr.ru/post/230751
   
4. The fourth option is to create a server script that will parse programs.html and return the response in the desired format, such as JSONP. Doesn't require CORS. Can be combined with a template engine.
   

Answer 4

Something like this

$.get('programs/programs.html',function(data){
    var $resp = $(data);
    $(target).html( $resp.find('.selector') );
    here.append($resp.find('.selector'));
});