jquery 字符串拼接动态修改问题

根据条件动态拼接字符串、动态修改拼接字符串中某个值本是常事，但当越来越多的人问我：为啥这样写p标签里面的内容不变呢？貌似就不简单了。

例一：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>字符串拼接动态修改测试</title>
    </head>
    <body>
        <div id="content"></div>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script>
        var html = '<div>' +
            '<h4>字符串拼接动态修改测试</h4>'+
            '<p id="subcontent">测试点,此处需要动态赋值</p>' +         
            '</div>';
        $('#subcontent', $(html)).html('动态赋值成功');
        $('#content').append(html);
        </script>
    </body>
</html>

运行下试试：

例一运行结果

在运行完“动态赋值成功”语句后，打印下html的值:

"<div><h4>字符串拼接动态修改测试</h4><p id="subcontent">测试点,此处需要动态赋值</p></div>"

p标签里面的值没有变化，不是“动态赋值成功”，并不是我们想要的结果！为什么呢？

心中有答案了？把上面的例子改下：

 $('#content').append(html);

改成

 $('#content').append($(html));

这次应该是对的。运行下，看下结果：

例二运行结果

咦？？？和上面一样，为啥还是不对嗫？？？结果依然不是我们想要的。

把例子再改下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>字符串拼接动态修改测试</title>
    </head>
    <body>
        <section id="part1"></section>
        <section id="part2"></section>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script>
        var html = '<div>' +
            '<h4>字符串拼接动态修改测试</h4>'+
            '<p id="subcontent">测试点,此处需要动态赋值</p>' +         
            '</div>';
        $('#subcontent', $(html)).html('动态赋值成功');        
        $('#part1').append(html);
         $('#part2').append(html);
        </script>
    </body>
</html>

运行结果：

例三运行结果

对，part1和part2分别append了没有被修改过的html字符串，仍不是想要的结果。可是这个和例一有什么关系呢？

最后一次改下代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>字符串拼接动态修改测试</title>
    </head>
    <body>
        <section id="part1"></section>
        <section id="part2"></section>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script>
        var $html = $('<div>' +
            '<h4>字符串拼接动态修改测试</h4>'+
            '<p id="subcontent">测试点,此处需要动态赋值</p>' +         
            '</div>');
        $('#subcontent', $html).html('动态赋值成功');
        $('#part1').append($html);
        $('#part2').append($html);
        </script>
    </body>
</html>

看下运行结果：

例四运行结果

睁大眼睛！！！p标签里面显示了正确的结果！！而且，html只被append到了part2里面！！！

为什么会append到part2里面呢？(这不是重点！)
其实首先是append到part1里面，但是part2又append了和part1相同的jquery对象，此时只会移动已存在的DOM节点，而不是复制（这是和例三append html不一样的地方）！

再来看下为什么这次结果正确了？

上个答案已提到，因为part2和part1 append的是相同的jquery对象！

例四的代码，是不是从始至终就一个$html对象？回到例三的代码， $(‘#subcontent’, $(html))这个p标签其实赋值成功了，只不过没有对象append这个 $(h t m l) ，自然就不会显示了。那好， a pp e n d$ (html),回到例二，可是结果为啥还不对呢？因为

 $('#subcontent', $(html)).html('动态赋值成功');
 $('#content').append($(html));

这两行代码里的$(html)压根就不是同一个jquery对象实例！！！

jQuery中每一个对象都是一个新的jQuery.fn.init()实例，所以即使包含的DOM元素相同，这两个jQuery对象也并无关系,而且并不相等！

如果进jquery源码里面看的话，p标签是赋值成功的，可能换种写法更易懂，上面第一行代码改成这样：

 var $html = $(html);
 $('#subcontent', $html).html('动态赋值成功');

运行完动态赋值成功’语句后看看$html的innerHTML:

$html的innerHTML

完全正确！
是不是知道怎么改了？？？

 $('#content').append($(html));

改为：

 $('#content').append($html);

再运行一遍完整代码（跟例四差不多）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串拼接动态修改测试</title>
</head>

<body>
    <div id="content"></div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        var html = '<div>' +
            '<h4>字符串拼接动态修改测试</h4>' +
            '<p id="subcontent">测试点,此处需要动态赋值</p>' +
            '</div>';
        var $html = $(html);
        $('#subcontent', $html).html('动态赋值成功');
        $('#content').append($html);
    </script>
</body>

</html>

运行结果：

最终结果

bingo!大功告成!

ps:注意点

1、每次$（‘’）其实都是生成一个新的jquery对象实例
2、找到正确的jquery对象实例，养成编码好习惯，该缓存就缓存，既省代码也省内存_