title: How do I create a button in javascript that appears next to output? I am including more specification inside
body: <p>In my html file I have a div tag to add output from an external Javascript file which looks like this.</p>
  
  <pre><code>&lt;div id="section" class="format" align="left"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The output is passed to the div with this code.</p>
  
  <pre><code>document.getElementById("section").innerHTML = output;
  </code></pre>
  
  <p>Now, the next piece of code is output that is passed to the code previous to this to be displayed on the webpage. What I want is to add a button that is displayed, on the right, next to the location output in the html file and the code looks like this.</p>
  
  <pre><code>output+="Location: ";
  output+=x[i].getElementsByTagName("location")[0].childNodes[0].nodeValue + " ";
  output+="&lt;br&gt;";
  output+="Well Depth: ";
  output+=x[i].getElementsByTagName("welldepth")[0].childNodes[0].nodeValue + " ";
  output+="&lt;br&gt;";
  output+="Perf Depth: ";
  output+=x[i].getElementsByTagName("perfdepth")[0].childNodes[0].nodeValue + " ";
  output+="&lt;br&gt;";
  output+="Perf Zone: ";
  output+=x[i].getElementsByTagName("perfzone")[0].childNodes[0].nodeValue + " ";
  output+="&lt;br&gt;";
  output+="Stroke: ";
  output+=x[i].getElementsByTagName("stroke")[0].childNodes[0].nodeValue + " ";
  output+="&lt;br&gt;";
  output+="Stroke/min: ";
  output+=x[i].getElementsByTagName("strokepermin")[0].childNodes[0].nodeValue;
  </code></pre>
  
  <p>I've tried many different solutions on google and the most notable example is as follows.</p>
  
  <pre><code>var button = document.createElement("button");
  button.innerHTML = "Do Something";
  
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(button);
  
  button.addEventListener ("click", function() {
  alert("did something");
  });
  </code></pre>
  
  <p>I think it's close but I want the button next to the location output and not after the output as shown in this image.</p>
  
  <p>The thing is though the output is based on a search and the code assigning output to this line, </p>
  
  <pre><code>document.getElementById("section").innerHTML = output;
  </code></pre>
  
  <p>is in a loop because multiple results can come from the search.</p>
  
  <p><a href="https://gyazo.com/f7b20ef1c0a41752393af8a2cdfb6cf9" rel="nofollow noreferrer">Output shown here</a></p>
  
  <p>I am not sure how I would make a button next to the location output.</p>
  
  <p>Thank you very much!</p>