jquery - Jquery：尝试在附加到 DOM 之前在 HTML 字符串上使用 .before 或 .after

Question

在将完成的字符串写入 DOM 之前，我试图在 HTML 字符串之前和之后插入 HTML 字符串。这是我到目前为止所拥有的：

var Hello = '<p id="1234">Hello</p>'; 
var $Hello = $(Hello);
var $HelloGoodbye = $Hello.after('<p>Goodbye</p>');
$('#content').append($HelloGoodbye);

结果是我的#content div 只附加了 Hello 片段。

提前致谢！

Answer 1

问题是因为$Hello是对<p>元素的引用。您将“再见”<p>放在第一个之外，因此$Hello变量不受影响。如果要将它们放在一个变量中，则需要某种将两者组合在一起的方法。尝试这个：

var $hello = $('<div></div>');
$hello.append('<p id="1234">Hello</p>');
$hello.append('<p>Goodbye</p>');
$('#content').append($hello);

示例小提琴

Answer 2

如果你把Goodbye放在元素之后，它就不在元素中。为什么不换

var $HelloGoodbye = $Hello.after('<p>Goodbye</p>');

和

var $HelloGoodbye = $Hello.append('<p>Goodbye</p>');

祝你好运！

Answer 3

.after() 将内容附加到所选元素的父级。在您的情况下， $Hello 未附加到任何元素，因此 .after() 无效。如果您切换最后两行 #content 将附加“再见”。

这是一个 jsFiddle：http: //jsfiddle.net/5xQZV/1/

​</p>