如何将HTML附加到跨度内的段落？

Question

我正在尝试将不同的液体语法附加到范围内的段落标记，以便根据屏幕大小截断不同点的内容。

以下是我目前的情况：

<script type="text/javascript">
    if ($(window).width() < 321) {
      $(".alert span p").append("test mobile");
    }
    else {
      $(".alert span p").append("test desktop");
    }
</script>

我的HTML看起来像这样：

<div class="alert">
    <div class="row">
      <div class="larger-12 columns">
        <span class="alertMessage" title="{{ alert_post.title }}"><p></p></span>
        <a href="#" class="close">&times;</a>
      </div>
    </div>
</div>

任何想法如何让这个工作？谢谢！

Answer 1

通过HTML语法，p元素中不能包含span元素。当您尝试以HTML标记方式嵌套元素时，浏览器会强制执行此操作。您可以通过在JavaScript中创建元素来生成这样的元素嵌套，但这样做没什么意义。

您应该从有效的HTML开始，例如在这里使用div而不是span。