Sadly your initial examples feel a bit card stacked... and the use of innerHTML in later ones feels far "older" and "the old way" than using the DOM.

Did you know appendChild retuirns the object you appended, as does Object.assign? Have you ever used Object.assign to set attributes on a Element? You've got a bunch of code doing the same thing, why not make a function for that thing? Why are you grabbingt the same element with the expensive getElementById over and over again for each child element you're inserting? That first example is a laundry list of how NOT to apply things via the DOM.

Your replacements not being much better since:

1) You can old-school use trailing back slashes to make multiline strings in JavaScript.

2) in Modern JS we have template literals.

3) by making an array of strings and joinging them together you're making the function work two to three times harder for no good reason. More CPU, more memory thrashing... just no.

And Template is -- no offense to those who like it -- a violation of the separation of concerns. This is information that has ZERO business in the HTML in the frist place if it's going to be scripting only behavior!

Remember, scripting only in the case of something like a shopping cart is a giant middle finger to usability and accessibility. Don't go there, no matter what nutjob fans of crap like React or Vue might tell you.

Your displaycart function for the template version being another bloated headache inducer with the endless slow overhead-creating querySelector for each and every blasted field.

And that's before we talk about your use of innerHTML that could open the door to XSS exploits. One malformed bit of user generated data, and you're in deep doo-doo. Remember, WHEN POSSIBLE aboid using innerHTML.

Then there's the improper use of onclick using the attribute/pass method like it's still 1998. Put the id on the button as its value, then extract it from Event.currentTarget.value so you can pitch that pointless wrapping function and the "need" to pass the id as a parameter malarkey.

I might write up a quick article to show what I mean. I see these types of examples all the time where it truly feels like the initial "bad" version has been sabotaged on purpose to make an even worse alternative look good. I don't know it ift's intentional or not, but it doesn't speak well to making one's point.