Question

所以，我通过文本框将样式注入iframe，我很好奇为什么appendTo有效，而append没有。除了小的性能差异之外，我的印象是这些是相同的：

var contents = $('iframe').contents();
var body = contents.find('body');

var styleTag = $('<style>').appendTo(contents.find('head'));
// BROKEN??? = contents.find('head').append($('<style>'));

$('textarea').keyup(function() {
  var $this = $(this);

  if ($this.attr('class') === 'html') {
    body.html($this.val());
  } else {
    styleTag.text($this.val());
  }
});

Answer 1

他们是不同的。

来自官方文件：

.appendTo( target ):将匹配元素集中的每个元素插入目标的末尾。

.append( content [, content ] ):将参数指定的内容插入匹配元素集中每个元素的末尾。

Answer 2

您使用这些方法的语法不正确。您使用它们的方式是假设.append($('<style>');和$('<style>').appendTo(...);都返回新创建的<style>元素。

这个假设不正确。

第var styleTag = $('<style>').appendTo(contents.find('head'));行将返回新创建的样式元素。

然而，行var styleTag = contents.find('head').append($('<style>'));会返回IFrame的head对象。

解决此问题的方法是首先创建<style>元素，然后将其附加到IFrame：

var contents = $('iframe').contents();
var body = contents.find('body');

var styleTag = $('<style>');
contents.find('head').append(styleTag);

Answer 3

函数append和appendTo都具有相同的功能。主要区别在于语法特定，内容和目标的放置。

例如，在两个语句下面为div添加span标记。执行后，两个div的标记将完全相同。

$('<span>').appendTo(contents.find('#div1'));
contents.find('#div2').append($('<span>'));

为什么appentTo在追加时不起作用？

3 个答案: