工作需要，根据条件动态拼接字符串、动态修改拼接字符串中某个值本是常事，但当越来越多的同事问我：为啥这样写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里面！！！
<i>为什么会append到part2里面呢？(这不是重点！)</i>
其实首先是append到part1里面，但是part2又append了和part1<b>相同的jquery对象</b>，此时只会移动已存在的DOM节点，而不是复制（这是和例三append html不一样的地方）！
再来看下为什么这次结果正确了？
上个答案已提到，因为part2和part1 append的是相同的jquery对象！
例四的代码，是不是从始至终就一个$html对象？回到例三的代码， $('#subcontent', $(html))这个p标签其实赋值成功了，只不过没有对象append这个 $(html)，自然就不会显示了。那好，append$(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对象实例，养成编码好习惯，该缓存就缓存，既省代码也省内存_
网友评论