title: Get content from pre element and run as javascript
body: <p>So I have a bunch of JavaScript snippets each contained in their own <code>pre</code> tags. I would like to know if it is possible to get the content out of the <code>pre</code> tag and run it as JavaScript.</p>
  
  <p>For example let say one of my <code>pre</code> tags look like this:</p>
  
  <pre><code>&lt;pre id="basic-alert"&gt;alert('Hello World');&lt;/pre&gt;
  </code></pre>
  
  <p>When I click a button I want to get the content from within this <code>pre</code> and run it as JavaScript.</p>
  
  <p>I know I can simply do this</p>
  
  <pre><code>$('[data-target="#basic-alert"]').on('click', function(e) {
      alert('Hello World');
  });
  </code></pre>
  
  <p>But I have a quite a few code examples and would like to know if it is possible to avoid adding each of them into the JavaScript file. I would like to do something like this</p>
  
  <pre><code>&lt;div class="code-example"&gt;
      &lt;button&gt;Run Code&lt;/button&gt;
      &lt;pre&gt;alert('Hello World');&lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then call something like this in JavaScript</p>
  
  <pre><code>$('.code-example &gt; button').on('click', function(e) {
      var code = $(this).closest('.code-example').find('pre').text();
      executeJS(code);
  });
  </code></pre>
  
  <p><code>executeJS</code> is not a function I have made, I just used it because I am not sure what the code to would be to dynamically execute JavaScript code.</p>
  
  <p>I do have access to <code>PHP</code> for any server side scripting. Not sure if that will make this task easier or not, but thought I would state it anyways. If this is impossible please just let me know.</p>