title: Is there a way to write an object inside an existing HTML Element
body: <p>How can I write an object inside this this div element</p>
  <pre><code>&lt;div id=&quot;carsDivId&quot;&gt;
   &lt;p&gt;The carsDiv&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I created an object like this inside my scripts?</p>
  <pre><code>var car = {
              &quot;make&quot; : carMake,
              &quot;model&quot; : carModel,
              &quot;color&quot; : carColor,
          };
  </code></pre>
  <p>I then to the following;</p>
  <pre><code>        var parent = document.querySelector('#carsDivId'); //fetch existing div element
          var pElement = document.createElement('p'); // create paragraph element
          var pElementId = document.createAttribute(&quot;id&quot;); //create paragraph element id  
          pElementId.value = &quot;par1&quot;; //create the value of the id 
          pElement.setAttributeNode(pElementId); //assign the attribute to to an element
  </code></pre>
  <p>Write contents of my object inside variable txt</p>
  <pre><code>var txt = &quot;&quot;;
          for(var x in car){
          txt += car[x] + &quot; &quot;;
          };
  </code></pre>
  <p>and do the follwing;</p>
  <pre><code>var pElementText = document.createTextNode(txt);
      pElement.appendChild(pElementText);
      parent.appendChild(pElement);
  </code></pre>
  <p>What is is that I'm doing wrong here because the content appears briefly an disappers in milliseconds?</p>