How to split html code from a page into nodes

Question

I want to read the html from a site and then split it into nodes. I tried this code:

function load() {
 $(document).ready(function () {
  $.get("https://example.com/index.html", function (data) {
   const loadpage = async function() {
    var nodes = [...data.childNodes].slice(-3);
    var cont = document.getElementById("container");
    var msg = nodes;

   });
    
        if(cont.innerHTML='') {
         cont.insertAdjacentHTML('afterbegin', msg);
    }   else {
        cont.innerHTML=msg;
     }          
    };
   
   loadpage();
   });
  });
}

load();

html looks like this:

<main>
 <div class="msg">something</div>
 <div class="msg">something</div>
 <div class="msg">something</div>
 <div class="msg">something</div>
 <div class="msg">something</div>
 <div class="msg">something</div>
</main>

the expected output should be:

 <div class="msg">something</div>
 <div class="msg">something</div>
 <div class="msg">something</div>

since I want only the last 3 nodes.

Thank you.

Answer 1

It is not necessary to use async await here and you are doing it wrong

Please read How to return values from async functions using async-await from function?

Your load is also wrong and too complex. You should not add a window event handler in a function and the test to insert after if cont is empty is not useful. Your test is also not a comparison (== '' or === '') but an assignment (= '').

Add the data to a partial element and slice the result

$(document).ready(function() {
  const cont = document.getElementById("container");
  $.get("https://example.com/index.html", function(data) {
    const div = document.createElement('div')
    div.innerHTML = data; // assuming HTML string?
    [...div.querySelectorAll('.msg')]
    .slice(-3)
    .forEach(div => cont.innerHTML += div.outerHTML);
  });
});