javascript - jQuery wrap 和 appendTo 不会导致预期的结果

Question

我试图将一些 HTML 内容包装在一个 div 容器中，然后将一个 span 附加到该容器。但我不明白为什么附加的跨度没有出现。

所以我很好奇我是否做错了什么。

$('button').click(function() {
	
    var $container = $('<div class="container"></div>');
	$('.target').wrap($container);
			
    $label = $('<span class="duration-label">Hi there</span>');
	$label.appendTo($container);
});

.target {
    border: 1px solid black;
}

.container {
    background: red;
    padding: 10px;
}

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

<div class="target">
    <span>This is some unimportant text</span>
</div>
<button type="button">Click me</button>

Answer 1

是因为wrap制作一份你给它的包装器的副本，它不使用你直接给它的包装器。您正在附加到您给它的那个。

相反，使用您包裹内容的那个:

$('button').click(function() {

  // Wrap .target with the div, and get a reference to
  // the newly-created wrapper
  var $container =
          $('.target')
              .wrap('<div class="container"></div>')
              .parent();

  // Add a label to it
  var $label = $('<span class="duration-label">Hi there</span>');
  $label.appendTo($container);
});

.target {
  border: 1px solid black;
}
.container {
  background: red;
  padding: 10px;
}

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

<div class="target">
  <span>This is some unimportant text</span>
</div>
<button type="button">Click me</button>

---

旁注:您的代码成为 The Horror of Implicit Globals 的牺牲品因为你没有声明 $label。声明变量很重要。您可以使用严格模式让 JavaScript 引擎阻止您隐式创建全局变量。