title: What error do I have in my script that's preventing my buttons from inserting text before and after my image?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Add Elements&lt;/title&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function () {
          $(&quot;.test&quot;).click(function () {
            $(&quot;img&quot;).before[&quot;Before&quot;];
          });
          $(&quot;.test2&quot;).click(function () {
            $(&quot;img&quot;).after[&quot;After&quot;];
          });
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h3&gt;Example:&lt;/h3&gt;
      &lt;p&gt;
        Text will be inserted before and after the selected HTML element (img)
        upon clicking the respective buttons.
      &lt;/p&gt;
      &lt;img
        src=&quot;https://forums.homecomingservers.com/uploads/monthly_2020_10/2400px-Issue27-fullsize.png.b4bbd047f7804c86e1b10df2b90ac37c.png&quot;
        alt=&quot;Issue 27&quot;
        style=&quot;width: 500px&quot;
      /&gt;
      &lt;br /&gt;
      &lt;button class=&quot;test&quot;&gt;Insert Before&lt;/button&gt;
      &lt;button class=&quot;test2&quot;&gt;Insert After&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>With the above code, I'm doing an example using jQuery to add elements to the image I have in my code. When the user clicks the &quot;Insert Before&quot; button and the &quot;Insert After&quot; button, text is supposed to be inserted before and after my image, respectively. However, upon clicking the buttons, nothing returns. What error do I have in my code?</p>