title: How to append HTML to a paragraph inside a span?
body: <p>I am trying to append different liquid syntax to a paragraph tag within a span in order to truncate the content at different points depending on screen size.</p>
  
  <p>Here is what I have currently:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      if ($(window).width() &lt; 321) {
        $(".alert span p").append("test mobile");
      }
      else {
        $(".alert span p").append("test desktop");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And my HTML looks like this:</p>
  
  <pre><code>&lt;div class="alert"&gt;
      &lt;div class="row"&gt;
        &lt;div class="larger-12 columns"&gt;
          &lt;span class="alertMessage" title="{{ alert_post.title }}"&gt;&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
          &lt;a href="#" class="close"&gt;&amp;times;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas how to get this working? Thanks!</p>