title: How to create HTML element for JavaScript and not for HTML
body: <p><strong>I have this simplified code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const chancesData = ["facebook","twitter","google"];
          let inputsArr = [];
          const inputsArrFill = chancesData.map((cur, index) =&gt; {
            const input = (document.createElement("input").value =
              chancesData[index]);
            inputsArr.push(input); //I want the pushed value to be something like this "&lt;input value"facebook"&gt;"
            return inputsArr;
            //so the returned array (should) be something like this: 
            //["&lt;input value"facebook"&gt;","&lt;input value"twitter"&gt;","&lt;input value"google"&gt;"]
          });
          console.dir(inputsArrFill);
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>as you can see if you opened this coed in your console, the returned array looks like this:</p>
  
  <pre><code>['facebook', 'twiiter', 'google']
  </code></pre>
  
  <p>I want it to look like this:</p>
  
  <pre><code>['&lt;input value="facebook"&gt;','&lt;input value="twitter"&gt;','&lt;input value="google"&gt;']
  </code></pre>