我不能将</a>
附加到<a>
(第二部分没有链接在一起(,只能使用如下所示的串联。如何解决这个问题而不是使用串联?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>I'm A Template</title>
</head>
<body>
<div id="a"></div>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
var b = '<a href="#">%data%',
c = ' - %data%</a>',
d = '1';
// concatenation
$("#a").append(b.replace('%data%', d) + c.replace('%data%', d));
$("#a").append('<br>');
// append
$("#a").append(b.replace('%data%', d));
$("#a").append(c.replace('%data%', d));
</script>
</body>
</html>
我无法将
</a>
附加到<a>
,第二部分没有链接在一起
是的。DOM 对完整的元素进行操作,而不是单个标签。当您添加不带结束标记的<a>
时,它会为您修复该问题,以便您始终拥有有效的树。
如何解决这个问题而不是使用串联?
串联没有错。当然,弄乱HTML字符串有很多问题。而是使用
var d = '1';
$("#a").append($('<a>', {
href: '#',
text: '%data% - %data%'.replace(/%data%/g, d)
}), $('<br>'));
变量中不需要锚标记。您可以先创建一个锚标记并将其附加到div#a,然后将 %data% 的内容附加到此新创建的锚标记
<body>
<div id="a"></div>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
var b = '%data%',
c = '%data%',
d = '1';
$("#a").append("<a href='#' id='anchorTag'></a>");
$("#anchorTag").append(b.replace('%data%', d));
$("#anchorTag").append(c.replace('%data%', d));
</script>