<table width="100%" border="1">
  <thead>
    <tr>
      <th>Image</th>
      <th>Title</th>
      <th>Link</th>
    </tr>
    <tbody></tbody>
  </thead>
</table>
$(function() {
  $.ajax({
    type: 'post',
    url: 'https://coolql.cool/graphql',
    contentType: "application/json",
    data: JSON.stringify({
      query: `{
        phapLuat: site(url: "https://vnexpress.net/phap-luat") {
          news: selectAll(elem: ".sidebar_1 .list_news") {
            title: select(elem: "h4.title_news a") {
              text: attr(name: "title"),
              href
            }
            thumb: select(elem: ".thumb_art .vne_lazy_image") {
              src: data(name: "original")
            }
          }
        }
        giaoDuc: site(url: "https://vnexpress.net/giao-duc") {
          news: selectAll(elem: ".sidebar_1 .list_news") {
            title: select(elem: "h4.title_news a") {
              text: attr(name: "title"),
              href
            }
            thumb: select(elem: ".thumb_art .vne_lazy_image") {
              src: data(name: "original")
            }
          }
        }
      }`
    }),
    success: function(res) {
      $.each(res.data.phapLuat.news, function(idx, n) {
        $("table tbody").append(`
          <tr>
            <td><img src="${n.thumb.src}" /></td>
            <td>${n.title.text}</td>
            <td>${n.title.href}</td>
          </tr>
        `)
      })
      $.each(res.data.giaoDuc.news, function(idx, n) {
        $("table tbody").append(`
          <tr>
            <td><img src="${n.thumb.src}" /></td>
            <td>${n.title.text}</td>
            <td>${n.title.href}</td>
          </tr>
        `)
      })
    }
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js