$ .replaceWith（）和$ .remove + $ .appendTo之间的区别？

当我使用这两位代码时，我遇到了不同的结果。对我而言，它们应该是等同的。有什么不同？

var mapString = '<map id="map"><area shape="poly" coords="52,21,92,21,92,196,52,196"></map>'; 

// First option: 
$('#map').replaceWith(mapString); 

// Second option: 
var mapParent = $('#map').parent(); 
$('#map').remove(); 
$(mapString).appendTo(mapParent);

第一个选项用一个表示为字符串的新地图元素替换现有的地图DOM元素。第二个选项删除现有的地图DOM元素，然后附加一个新的地图元素。

这不应该是一样的吗？看起来我的地图区域在调用replaceWith时不刷新。

编辑：第一个不会导致浏览器重新绘制第二个位置？

来源

2014-11-14 Sean Anderson

结果应该是一样的。也许浏览器不重画窗口。 – undefined 2014-11-14 22:09:50

这就是我在想什么。 – 2014-11-14 22:10:52

'replaceWith'有效地做到这一点：'$（'＃map'）[0] .parentNode.replaceChild（newMap）;'这绝对是非常接近第二个选项，除非它没有明确地删除旧的内容。 – 2014-11-14 22:17:22

结果是不相同的，因为：

replaceWith（）：被替换的元素将在相同的位置）（其父FE第二子）
appentTo（：附加的元素将是其父项的最后一个子项！

来源

2014-11-14 22:18:39 sjkm

啊，是的，这也是一个区别。任何想法，如果一个导致重漆，而另一个不？ – 2014-11-14 22:22:40

通常这应该会导致重绘，如果它没有任何理由尝试这样的事情：https://coderwall.com/p/ahazha/force-redraw-on-an-element-jquery – sjkm 2014-11-14 22:25:33

也许您的网页上有其他脚本错误？此代码示例对我的作品在这两种情况下：

var newContent = '<div id="original">New Content!</div>'; 
 

 
$('#original').replaceWith(newContent); 
 

 

 
var parent = $('#original2').parent(); 
 
$('#original2').remove(); 
 
$(newContent).appendTo(parent);

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

 
<div> 
 
    <div id="original">Original Content 1</div> 
 
</div> 
 

 
<div> 
 
    <div id="original2">Original Content 2</div> 
 
</div>

来源

2014-11-14 22:26:44

$ .replaceWith（）和$ .remove + $ .appendTo之间的区别？

回答

相关问题