Question

I cannot append </a> to <a> (the second part isn't linked together) but can only use concatenation as showed below. How to solve this instead of using concatenation?

<!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>

Answer 1

我无法将</a>附加到<a>，第二部分没有链接在一起

是。 DOM操作完整元素，而不是单个标记。当您添加<a>而没有结束标记时，它会为您修复此问题，以便始终拥有有效的树。

如何解决这个问题而不是使用连接？

连接没有错。当然，搞乱HTML字符串有很多问题。而是使用

var d = '1';

$("#a").append($('<a>', {
    href: '#',
    text: '%data% - %data%'.replace(/%data%/g, d)
}), $('<br>'));

Answer 2

您不需要在变量中包含锚标记。您可以先创建一个锚标记并将其附加到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>

JS附加到<a>

2 个答案: