How to insert a div from one html into another, while editing the elements in it?

Question

AJAX

I have two html files, one is the main code, the other contains svg blocks that should be changed using js.

Why not just do it in one html?

svg кода на 14 тысяч строк и если хранить это в одном файле, то скорость загрузки страницы будет очень медленной.

I tried to insert this div via regular XMLHttpRequest

var xhr= new XMLHttpRequest();
           xhr.open('GET', 'kakoyito-html.html', true);
     xhr.onreadystatechange= function() {
         if (this.readyState!==4) return;
         if (this.status!==200) return; // or whatever error handling you want
         document.getElementById('config_block').innerHTML= this.responseText;
     };
     xhr.send();

But when clicking on the buttons that should change svg, I got an error:

One of the blocks that gives an error

const option_price = document.querySelector('.option_price');
const priceArg = document.querySelectorAll('[price]');
const optionSum = () => {
  oprion_sum = 0;
  for (let i = 0; i < priceArg.length; i++) {
    if (priceArg[i].checked) {
      oprion_sum += +priceArg[i].getAttribute('price');
    }
  }
  if (oprion_sum > 0) {
    let arr = [];
    let srt = oprion_sum.toString().split('');
    for (let [i, count] = [srt.length - 1, 1]; i >= 0; i--) {
      count++;
      if (count === 5) {
        arr.unshift(' ');
      }
      arr.unshift(srt[i]);
    }
    option_price.childNodes[0].data = arr.join('');
  } else {
    option_price.childNodes[0].data = oprion_sum;
  }
  return oprion_sum;
};

Please help me with this, I've been suffering for the second day!

Answer 1

Use fetch it is easy to use and if the html is on the same domain then CORS will not bother
After receiving the response, display it anywhere and outside of fetch already change it