after（）将引号括在注入的HTML周围

Question

这是Javascript：

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

这是HTML：

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

Answer 1

此语法：var stockSubject = new Subject<Stock>(); var stockPriceSubject = new Subject<StockPrice>(); Observable .Interval(TimeSpan.FromMilliseconds(10)) .Take(3) .Subscribe(_ => { switch (_) { case 0: { var stock = new Stock("MSFT"); stockSubject.OnNext(stock); break; } case 1: { var stock = new Stock("GOOG"); stockSubject.OnNext(stock); break; } case 2: { var stock = new Stock("APPL"); stockSubject.OnNext(stock); break; } } }); Observable .Interval(TimeSpan.FromMilliseconds(20)) .Take(3) .Subscribe(_ => { switch (_) { case 0: { var stockPrice = new StockPrice(new Stock("APPL"), 10m); stockPriceSubject.OnNext(stockPrice); break; } case 1: { var stockPrice = new StockPrice(new Stock("GOOG"), 15m); stockPriceSubject.OnNext(stockPrice); break; } } }); Observable .Timer(TimeSpan.FromSeconds(1)) .Subscribe(_ => { var stockPrice = new StockPrice(new Stock("MSFT"), 20m); stockPriceSubject.OnNext(stockPrice); });

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

这意味着您正在呼叫DOM after method，而不是jQuery after method。

他们的行为有所不同！

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

如果将字符串传递给DOM方法，它将把它隐秘到 text 节点并插入。

您要调用jQuery方法而不是DOM方法，因此请使用bubbles[bubbles.length-1]获得一个包装最后一个DOM节点的jQuery对象，而不是用于获取原始DOM节点的方括号表示法：

last()

Answer 2

使用new_df = df1.join(df2, on=['field_B', 'field_C', 'field_D'], how='left_outer') 或.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>`);

Answer 3

after接受DOM Node元素或字符串-在您的情况下，您传递的是字符串，因此将其视为字符串并打印出来（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);