I have some HTML generated by php using `json_encode()`, which look like this:

1.     ob_start();
2.         if ($my_query->have_posts()) :
3.             while ($my_query->have_posts()) : $my_query->the_post();
4. 
   
5.                             get_template_part( 'template-parts/content', 'test' );
6.             endwhile;
7.                         endif;
8. 
   
9.     $response['content'] = ob_get_clean();
10. 
    
11.     die(json_encode(utf8_encode($response)));
12.     }

This is how look the html from the php (wordpress posts):

1.     <article id="post-4996" class="post-4996 post type-post status-publish format-standard hentry category-news tag-dog">
2.       <header class="entry-header">
3.                 TEST
4.         <a href="http://example.com/test/news/4996" rel="bookmark">Mon post</a> 
5.         <div>TAGS:<a href="http://example.com/tag/dog" rel="tag">dog</a></div>
6.        </header>
7.     </article>

So with the `json_encode()`. I get the full html output in my JSON reponse, like that.

1.     {
2.      "content":"\n<article id=\"post-4996\" class=\"post-4996 type-post status-publish format-standard hentry category-news tag-dog\">\n\t<header class=\"entry-header\">\n\t\t\t\n\t\tTEST\n\t\t\t\t<a href=\"http:\/\/example.com\/test\/news\/4996\" rel=\"bookmark\">Mon post<\/a><div>TAGS:<a href=\"http:\/\/example.com\/tag\/dog\" rel=\"tag\">dog<\/a><\/div>\n\t\t\t<\/header><\/article>\n"
3.     }

And this is how i retrieve it in my jquery:

1.     var $container    = $('#main');
2.     var $pagePosts    = $container.find('article');
3.     var $myContainer  = $('.my_container');
4. 
   
5.     function get_posts($params){
6. 
   
7.          jQuery.ajax({
8.                url: mdu.ajax_url,
9.                     data: {
10.                            action: 'my_get_posts',
11.                            nonce: mdu.nonce,
12.                            params: $params
13.                            },
14.                            type: 'POST',
15.                            dataType:'json',
16.                          success: function(data, textStatus, XMLHttpRequest {
17.                                  console.log('Success  ', data.content);
18.                                  $pagePosts.empty();
19.                                  $myContainer.html(data.content);
20.                                  }
21.                         });
22.                      }
23.     $("a[rel='tag']").click(function(tag){
24.                         event.preventDefault();
25.                         clickTag = $(tag.target).text();
26.                         $params = {'tag' : clickTag,};
27. 
    
28.        get_posts($params);
29.      });
30. 
    
31. 
    
32. 
    

I add the content using the JQUERY `.html()` method but on it only add the `<article>` tags and not the content (`<header>`,`<a>`,`<div>`,...) which means i have only this as a result in my web page… 

    

1.     <article id="post-4996" class="post-4996 post type-post status-publish format-standard hentry category-news tag-dog">
2.     </article>

I have check the JSON on jsonlint.com and it's clean, the JSON response correspond to what's expected only the `.html()` seems to be the issue but i don't get why.

Any input much appreciated.