17. 尚硅谷_佟刚_jQuery_克隆和替换节点.wmv原创

我们来讲以下的两个基础点，一个叫复制节点，一个叫替换节点，那这个复制跟替换做完之后呢，我们就可以来做GS，前面写那个互换的那个练习，先看复制节点。克隆。克隆匹配的倒元素返回值为克隆后的副本，但此时复制的节点不具备任何行为，如果是加一个处的话，它在复制元素的同时还会复制元素中的事件，看一下。盗墓。这个我们讲的呢，是测试的各种方法。

干什么呀，我要复制节点。OK。好，说到这个复制节点的话呢，我们看一下实际这个情况吧，实际的话呢，比方说我现在啊，我先为每一个Li。下一个。函数，让它能够弹出对应的文本值，加一下Li。But。点OK，你看。这是OK的，好了，那现在的话呢，我希望复制。

复制谁复制？北京节点。In。添加人呢。2L节点的后面，因为你光一个复制的话呢，我们看不出效果，我们复制完之后的话，再给它粘到那个后边，于是看叫北京对克隆，而且放在什么什么的后边，Insert after放谁后边啊。放在2L的后面。好吧，这里边有一个什么问题呢？你在复制完之后，你看它是不是有一个ID呀，复制完之后的话，是不是会导致我在这一个页面里边有两个ID一样的节点，所以说复制的时候的话呢，应该把这个ID再处理一下，我们先看效果吧，那北京在这儿呢？好了，我点北京的话呢，北京没有反应，红警还是有的，这个北京也还是有的，我们先看这个复制。

顶点这好了，看一下工具。开发者工具好，我们看看底下这个北京，大家看这是不是ID是北京啊，这个ID也是北京吧，这样实际上是有问题的。所以说我们在复制的同时的话呢，我把这个ID给他。重置一下，我们讲过有一个方法叫AB drr，我把这个abd重新复一个值，比方说北京to，我们在干什么？是不是在用这个方法的连缀啊？我调完一个方法之后的话，这个返回值还是我的这个，呃，北京，好了，我这样写。

还是把这个代码放在一个后边，这个先后有关系吗。有关系吗？先看我这么写是个什么结果，刷新一下，大家看这是不是改了。这是不是也是北京二啊，你这样说的话不行，他怎么回事，我是不是先把北京这个改，然后再克隆啊，应该是先克隆后改属性吧。哎，先克隆后改属性，再看这个上去看效果，再刷新打开看北京吧。北京二吧，哎，这个时候的话呢，这个ID就改了好了，但我现在这种克隆的话，克隆之后的话呢，它不具有行为，这个是有的，如果我要是加一个触的话，它将具有行为。

它将在克隆节点的同时克隆节点所具备的事件。刷新一下，你看这个时候北京，哎这个是可以弹出的，这就是我们克隆的这个方法，好了，克隆这块的话呢，我们说两个问题，第一个问题克隆。节点是节点时需要注意原节点的啊，注意克隆后吧，克隆后的节点的ID属性，如果要是有的话，因为我克隆之后的话呢，原节点要是有ID的话，克隆之后也有ID，就导致在同一个。

文档中有两个ID一样的节点，这是有问题的圆节点有。若元节间有ID。属性。如果以前要是有的话，克隆后会不在一个文档中有两个。ID相同的。节点的情况，这是一个需要注意的，第二个需要注意的就是这个克隆，如果要是加上一个触的话啊，在克隆节点的同时，在克隆节点的同时。

克隆节点。包含的就是克隆节点。啊。看下一个叫替换节点，Replace with跟谁谁换，还有一个replace all，又是啊，主语跟宾语。对应的两个方法，就是说这个是主语，这个是宾语，这个是宾语，这个是主语，就这个意思。这是什么？跟谁换它也是是吧？C跟谁换？那将所有匹配的元素听为指定的HTML或倒母元素这个颠倒了这个位的方法，或在替换之前已经在元数上绑定的事件，替换后这个事件将被消失。看一下replace with上一个。

嗯。这是解宽的什么方法呢，或者是。什么叫？替换节点，好，那我们说个需求吧，对啊，放建一个战队谷节点。干什么呢，替换。K的最后一个时间点。

以前要是写这个方法的话呢，其实挺费劲的，那最后一个什么子节点，文本节点，Is节点，这样写好一些，好，以前要是用ES写的话，你可以想一下你怎么写，你看现在的话呢，我们来写替换。Li创建一个新的啊，Li上好了点。哦，跟谁换呢，跟他换。节点，而且是这么写吧，效果。给我了怎么换？

看，那这个是什么呢？这是我新创建的节点在前边，要是反过来应该是写一个来再创建一个。CTRLCCTRLV5我们写个。这个标记哈，替换C的。啊，第二个节点。第二个LS节点，那这个的话呢，还是我们要是用以前办法写的话很麻烦，现在我们用块去写很轻松，Li第二个怎么写啊，几从几开始。一开始还是从零开始？

从零开始吧，一。点replace换成新的谁呢？换成它CTRLCCTRL为上五。E是指的是下标吗？Replace with。不换了，为什么换，这就是啊节点替换的方法，那好了，那既然的话呢，这个节点替换的话，我们还有一个克隆，现在呢，我们来做这样一件事。三我说什么呢？替换。2L和。北京他俩互换啊，叫替换叫互换，互换以下两个咋换呢。

互换你是不得先克隆一个呀，然后再换你，否则的话换不了，我们先看直接换。北京。Replace with换成。2L我们说直接这么写到会怎么样？是不是这样一换的话，北京是换成了这个L了，但这个I是不是移动了呀。讲过这个事儿哈，看。是这个情况吗？换了它不但有替换，还有移动的功能，看不但替换还有移动的功能，不但还有直接减，还有一共啊。功能我们我们不希望移动，那好了，那要是更换的话怎么办呢？我只能是克隆。

克隆吗？北京兔等于。北京节点克隆克隆什么呢处好。然后我先把红警换为。北京还是北京会园红景啊？就是说我需要用什么呀，我需要用它吧。红警，Replace with。北京护板这个返回值是我们高头，这个返回值是我们的风景一换之后的嘛，OK，然后呢，我再把。

北京。北京。Replace，谁呀？关克隆之后这个吧。这个时候我要是这样一换的话呢，这个北京换为红对对。哎呀，还小，这几个乐。一。I。爱。一。北京吧，二红警吧，是不是换了都这么换。这就是节点的互换。同样节点互换的话，需要先横。

节点。货款需要先。克隆节点就是说你直接使用那个replace space啊，它只能单方面换，而且它还有一定的功能，你要想互换的话，必须先克隆节点才可以。好了，我们归结一下哈，我们讲的这个关于节点的替换问题，说有几个吧，一个replace with，还有一个是。Replace，两个一对方法，一对方法可以完成一件事，怎么样就是？主语。英语哪个带钱的问题。哪个在前面啊，那说哪个在前面，哪个后面在后面呢？那with，这不是把谁换成谁啊，这个是啊，把谁换成谁，这个是谁去换谁吧，你记这个，这个是把谁换成谁，那另外一个就是C换成C好。

第二个我们要说的就是这件事儿，互换节点的话呢，它有一个移动的功能。这两个方法。以上的两个方法。还有一。节点的功能，三三说的就是这一个，如果要是节点互换的话，需要先克隆节点啊，这里边儿的话呢，其实这块还有一个就是我要是互换的话，我返回谁呀。

我要真互换的话，我是不是返回。被替换的那个节点，你看这个就是哈，这个方法返回被替换的节点，诶这个挺有意思的，CTRLC把这个加上就可以了。四就是说这是干什么呀？这不是把这个L换成北京啊，它返回的是。