out of order concatonation javascript
===

so basically my problem is this. lets say i have a variable og = something.innerHTML. then i have something-else.innerHTML = "string1" + og + "string2". well my result is that when i do inspect element, the code appears as if "string1" + "string2" + og happened. now i know this is a bit high lvl so its hard to really understand what is going on, but for complicated reasons i can put my code here so on my next paragraph i will get into more detail.

so the og variable is taking in the code for an image aka <image>. i have enough test cases to figure out that this works almost properly. the reason i say almost is because originally the code is an <image>, but when i use innerHTML and show an alert for og, it becomes an <img> tag. but onwards. 

so the something-else.innerHTML is basically refering to the stuff inside a div. string1 is the opening tag for svg and g. string2 is the ending tag svg and g. og is a .png image. so result is i want:
    <pre> <code>
       svg
         g
          image
         g
       svg
    </code> </pre>

what i am getting is:

<pre> 
<code>
    svg
      g
      g
    svg
    image
</code>
</pre>



p.s. i know the psudeo code looks bad right now, but when i actually create tags it doesnt show up. can anyone here plz tell me how to type in tags to show up as code here. i know some people will say "oh just look it up yourself". well i did. and all it said was to put it into the pre and code tags...that didnt help me much. in all honesty i think this site would be more user friendly if it was more intuitive to put in code. maybe im wrong. but if you like to put an answer to this as a bonus that be nice.