Check if an html block is the same as before

Question

I have this html block

    <div class="cities-data p-3">
        <div class="row my-3 justify-content-center align-items-center mx-3">
            <div class="modal-sec"></div>
        </div>
    </div>

I want to know after some changes to it, if it's the same as before. How do I do that in javascript? I have tried this:

let citiesData = $('.cities-data')
let citiesDataDefaultHtml = '<div class="row my-3 justify-content-center align-items-center mx-3"><div class="modal-sec"></div>'

if (citiesData.html() === citiesDataDefaultHtml){
    console.log('success')
    mainSection.find('main-body').addClass('move-down')
}

You should remove newlines and extra spaces from `citiesData` too — Justinas, Apr 20 '21 at 09:38
Could you add to your question what’s happening with that script and what you’d want it to do instead? — Daniel Apt, Apr 20 '21 at 09:39
Maybe this answers your question: https://stackoverflow.com/a/50493861/11023944 — wvdgoot, Apr 20 '21 at 09:41
I am not familiar with jQuery but doesn't `$('.cities-data')` returns a _collection_ of elements? If so, shouldn't `citiesData.html()` be `citiesData[0].html()` or something similar? — secan, Apr 20 '21 at 09:43
There's a lot of edge cases you will need to think about here, e.g. What happens if the same classes are in a different order? Is whitespace completely ignored, or just collapsed? It might help if you explain what you plan on using this for. — DBS, Apr 20 '21 at 09:44

score 1 · Answer 1 · answered Apr 20 '21 at 11:32

i used the following

    if (citiesData.prop('outerHTML') === citiesDataDefaultHtml){
        mainSection.find('.main-body').removeClass('move-up').addClass('move-down')
        mainSection.find('.new-line-btn').addClass('d-none')
        mainSection.find('.new-line-row').addClass('d-none')
    }

Check if an html block is the same as before

1 Answers1