title: Is it true that document.getElementById().innerHTML can't be used to insert new html which would disrupt the bracketing it is inner to?
body: <p>I've been mucking around with Javascript for the first time and have found that while you can easily do something like </p>
  
  <pre><code>&lt;p id="demo"&gt; Hello &lt;/p&gt;
  
  &lt;script&gt; document.getElementById("demo").innerHTML = "&lt;strong&gt;Hello&lt;/strong&gt;"; &lt;/script&gt;
  </code></pre>
  
  <p>and get "<strong>Hello</strong>". You can't do something like </p>
  
  <pre><code>&lt;p&gt; Hello my name is &lt;strong id="demo"&gt;Sam&lt;/strong&gt;&lt;/p&gt;
  
  &lt;script&gt; document.getElementById("demo").innerHTML = "Sam &lt;/strong&gt; and &lt;strong&gt; Susan"; &lt;/script&gt;
  </code></pre>
  
  <p>and get "Hello my name is <strong>Sam</strong> and <strong>Susan</strong>".</p>
  
  <p>I've had a look at places like w3schools to try to understand this. My best guess is that for whatever reasons .innerHTML can't actually change the "outer" of the element that it's altering. I'd love it if somebody could give me a slightly more clear explanation of this behaviour. I don't think it's something I want to use I'd just like to understand it a little better.</p>