JavaScript - Creating elements with innerHTML duplicates them. Why? : <p>When creating elements in JavaScript with innerHTML, it duplicates the tags.</p>

<pre><code>let container = document.querySelector(".container");

// This creates two Paragraphs
container.innerHTML = "&lt;p&gt; Paragraph &lt;\p&gt;";

// This only creates one Header 3
container.innerHTML += "&lt;h3&gt; Header 3";

// This doesn't close &lt;strong&gt; correctly and creates two Header 2
container.innerHTML += "&lt;h2&gt;&lt;strong&gt; Strong Header&lt;\strong&gt; Not Strong header &lt;\h2&gt; ";
</code></pre>

<p>Here's a good viewable Fiddle: <a href="https://jsfiddle.net/hdvxtujn/10/" rel="nofollow noreferrer">https://jsfiddle.net/hdvxtujn/10/</a></p>

<p>I've figured out, that if i only use an open tag, the element closes itself without duplication.
However, If i close the tag, the element duplicates itself with an empty element.</p>

<p>How come so and how to escape this? I would also like to add <code>&lt;strong&gt;</code> tag as displayed in the last example.</p>
