Wyciągnięcie ze stringa pewnych danych

var menu = document.getElementById('menu');
var siteContent = document.getElementById('site-content')


menu.addEventListener('click', getClickedItem, false);


function getClickedItem(e){
    if (e.target !== e.currentTarget){
        var clickedItem = e.target.id;
        var req = new XMLHttpRequest();

        req.open('GET', (clickedItem + '.html'), true);
        req.send(null);

        req.onreadystatechange = function () {
            if(req.readyState == 4){
                siteContent.innerHTML = req.responseText;
            }
        }

        var activeSite = document.querySelectorAll("#menu .active");
        activeSite[0].className = "";
        document.getElementById(clickedItem).parentElement.className = "active";
    }
    e.stopPropagation();
}

Witam! W tej o to linii

siteContent.innerHTML = req.responseText;

Pobieram sobie stringa z innego pliku html. Potrzebuje teraz z tego stringa wyciągnąć treść z danego elementu o id "site-content". Próbowałem to robić w taki sposób:

siteContent.innerHTML = req.responseText.querySelectorAll("#site-content");

Lecz wywala mi błąd... Potrzebuje po prostu z takiej struktury html w innym pliku:

<div id="site-content">
<p>Heloł!</p>
</div>

Wyciągnąć to:

<p>Heloł!</p>

Bardzo proszę o pomoc! Dziękuję!

PS. W gre wchodzi tylko JavaScript

Czyli chcesz mieć dwa elementy na stronie z tym samym id #site-content?

let el = document.querySelector('#site-content>#site-content');
console.log(el.innerHTML);

Chodzi o to że ładuje sobie treść przez AJAXa. Mam index.html, about.html, contact.html.

W index.html mam całą stronke i diva o id "site-content", do którego są podmieniane zawartości pozostałych plików za pomocą AJAX. Problem jest taki że gdy ładuje ponownie index.html to strona mi się dubluje. Tzn. do 'site-content' wlatuje mi calutka strony od <doctype> do </html>. I tak X razy w zależności ile razy klikne strone główną. (nie dziwne, w końcu pobieram cały dokument jak leci...)

Problemem jest to że w index.html trzymam całą strukture strony a nie tylko odpowiednią zawartość do ładowania (jak w przypadku pozostałych htmli).

Pomyślałem więc, aby za każdym razem pobierać tylko zawartość "site-content" (a nie cały dokument) i wrzucać do "site-content".

Utknąłem w tym momencie że nie potrafie ze zmiennej STRING w której trzymam cały tekst danego .htmla wyciągnąć tylko to co mnie interesuje - tj. zawartość "site-content".

Pytanie za sto punktów: a nie możesz w pozostałych plikać trzymać tylko potrzebnej treści? Po co ci tam header itp?

Odpowiadając na pytanie:

• utwórz nowy obiekt HTML w JS na podstawie tego stringa,
• wydłub z niego co potrzebujesz,
• nie rób tego, nie widzę żadnego sensownego przypadku, gdzie trzeba byłoby tak kombinować.

Dzięki za pomoc!

Udało mi się uporać z problemem załadowania treści z innych plików. Ładuje tylko treść z innych plików do odpowiedniego diva w index.html. Czyli tak jakby bazuje tylko na index.html otwartym cały czas. I tutaj przychodzi kolejny problem, kiedy chciałem oskryptować "inne" zakładki (te które się załadują po kliknięciu w menu, za pomocą ajax), moje skrypty nie wykrywają tych elementów i wyrzucają błąd. Mimo że one są po sprawdzeniu w chrome->inspect element, to błąd jest wyrzucany.

Jak mogę rozwiązać ten problem?

Mój scripts.js wygląda tak:

/*-------------------------------------- 3. Skicams --------------------------------------*/
var image1 = document.getElementById("cam-img-1");
var image2 = document.getElementById("cam-img-2");
var image3 = document.getElementById("cam-img-3");
var image4 = document.getElementById("cam-img-4");

function loadCameraImages() {
    if (image1) {
        var skicamsReq = new XMLHttpRequest();
        skicamsReq.open('GET', 'https://makevoid-skicams.p.mashape.com/cams.json');
        skicamsReq.setRequestHeader("X-Mashape-Key", "moj klucz");
        skicamsReq.send(null);
        skicamsReq.onreadystatechange = function () {
            if (skicamsReq.readyState == 4) {

                var video = JSON.parse(skicamsReq.responseText)

                image1.src = video['14'].cams['56'].url;
                image2.src = video['14'].cams['57'].url;
                image3.src = video['159'].cams['479'].url;
                image4.src = video['159'].cams['480'].url;

            }
        }
    }
}


/*-------------------------------------- 4. Navigation --------------------------------------*/
var menu = document.getElementById('menu');
var siteContent = document.getElementById('site-content')


menu.addEventListener('click', getClickedItem, false);


function getClickedItem(e) {
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        var req = new XMLHttpRequest();

        req.open('GET', (clickedItem + '.html'), true);
        req.send(null);

        req.onreadystatechange = function () {
            if (req.readyState == 4) {
                siteContent.innerHTML = req.responseText;
                loadCameraImages();
            }
        }

        var activeSite = document.querySelectorAll("#menu .active");
        activeSite[0].className = "";
        document.getElementById(clickedItem).parentElement.className = "active";
    }
    e.stopPropagation();
}


/*-------------------------------------- 5. Contact Form Validation --------------------------------------*/
var sendForm = document.getElementById("contact-form__send");
var contact_form_name = document.getElementById("contact-form__name");
sendForm.addEventListener('click', checkLength(contact_form_name, 1, 24));

function checkLength(field, min_l, max_l){
    var userText = field.value;
    if(userText.length >= min_l && userText.length <= max_l){
        return true;
    }else{
        document.getElementById('error-message').innerHTML = "Error! Please enter " + field;
        return false;
    }
}

Problem rozwiązany, wystarczyło w kodzie

            if (req.readyState == 4) {
                siteContent.innerHTML = req.responseText;
                loadCameraImages();
            }

dopisać więcej funkcji które będą się dodatkowo wywoływać.