Sorry, but getting the DOM parser involved is going full Gungan... the OPPOSITE of good practices in most cases. Likewise if we're talking websites, the overhead of HTML can actually become inefficient with large amounts of data, which is why you send JUST the data as JSON then glue it into DOM elements created BY the scripting.
JSON can transmit data in a smaller format, particularly if you limit yourself to Arrays. This is the Internet, that matters.
You also have the telltales of rookie code, what with the use of Element.style to set a border, the much slower querySelectorAll instead of getElementsByClassName when all you're doing is grabbing classes, not pre-selecting and storing for dynamic nodeLists, etc, etc. Even the markup of some of your examples is junk what with having multiple H1.
It's also funny how much you TALK about the DOM, but clearly don't actually use it.
Saddest of all though is how you don't even know the most basic parts of HTML. What makes the name of a place and a UL a grammatical / semantic paragraph? Why would the name of a place get "more emphasis" instead of being the appropriate depth heading? Since you used section H1 is ok if you give a flying purple fish about legacy UA's and screen/braille readers (should probably be a H2) but the STRONG should be a H3. Or definition lists where all you have is definitions without any terms for them to define!!!