after() 在注入的 HTML 周围加上引号

Question

这里是 Javascript：

var bubbles = $('.history .bubble');
bubbles[bubbles.length-1].after('<div class="bubble me">' + text + '</div>');

这是 HTML：

知道为什么我插入的任何内容都用双引号括起来吗？

Answer 1

此语法：bubbles[bubbles.length-1]

... 获取原始 DOM 节点，而不是 jQuery 对象。

这意味着您调用的是DOM after method，而不是jQuery after method。

他们的行为不同！

如果您将字符串传递给 jQuery 方法，它将尝试将其解析为 HTML，然后插入生成的 DOM 节点。

如果您将字符串传递给 DOM 方法，它会将其转换为 text 节点并插入。

您想调用 jQuery 方法而不是 DOM 方法，所以使用 last() 来获取包装最后一个 DOM 节点的 jQuery 对象，而不是使用括号表示法来获取原始 DOM 节点：

bubbles.last().after('<div class="bubble me">' + text + '</div>');

Answer 2

使用.last() 或.eq() 之类的东西代替括号表示法

演示

var text = "X";
var bubbles = $('.history .bubble');
var qty = bubbles.length - 1;
bubbles.eq(qty).after(`<div class="bubble me">${text}</div>`);
bubbles.last().after(`<div class="bubble me">${text}</div>`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='history'>
  <div class='bubble'>X</div>
  <div class="bubble">X</div>
</div>

Answer 3

after 接受 DOM 节点元素或字符串 - 在您的情况下，您正在传递一个字符串，因此它会将其视为并打印出来 (https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after)。如果你传递一个 Dom Node 对象，它的行为会如你所愿。试试这个：

var div = document.createElement("div");
div.innerHTML="test";
bubbles[bubbles.length-1].after(div);