JS追加</a>到的<a>



我不能将</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>

最新更新