为什么 jQuery 会删除我的 DIV 中的内容以及如何阻止它这样做？

Question

这是我的 sandbox.php 文件中的一些代码：

  <div class="jq">
    <img class="active" id="also" alt="Fifty-Fifty?" src="http://placehold.it/350x150"/>
  </div>
  <div id="title">
    This is the alt element of the 350x150 image, found by class.  It should return 'Fifty-Fifty?':
    <script>
      $("#title").text($('.jq .active').attr('alt'));
    </script>
  </div>

所以，我只是想弄清楚为什么“这是 alt 元素...”被删除，我想知道如何防止这种情况发生。我实际上并不觉得我需要一个“标题”div。我觉得我可以将文本附加到“jq”部分。

有人可以解释为什么人们也对结构文档感兴趣吗？我正在查看 StackOverflow 的代码，他们将所有链接都放在该 div 的 hlinks-custom-id'd div 中。锚点使其结构分隔变得非常清晰，并且似乎不需要更多的东西。不过，转到 YouTube.com，您会看到页面上的每个链接都有自己的 div。这看起来不奇怪吗？

Answer 1

我会使用 .append()，如下所示：

$("#title").append($('.jq .active').attr('alt'));

这是一个 JSFiddle。

Answer 2

因为你是替换，而不是附加。尝试：

var $t = $("#title");
$t.text($t.text() + $('.jq .active').attr('alt'));

Answer 3

这应该可以解决您的问题 -

    <script>
      $("#title").text($("#title").text() + $('.jq .active').attr('alt'));
    </script>

text 函数将替换所选元素中的所有文本内容。因此，您需要将原始文本附加到要添加的文本中，然后将所有内容传递给 text 函数。

Answer 4

您正在设置标题 div 的文本，因此您可以清除它并再次设置它。您正在寻找 jquery append() 函数。

<script>
    $("#title").append($('.jq .active').attr('alt'));
</script>

Answer 5

.text(value) 方法将 div 的内容设置为 value。因此，之前 div 中的内容将被删除，以便为新内容腾出空间。

您可能想改用 .append(value) 方法。它将值附加到 div 内容的末尾。