为 javascript 文件中的动态 html 标记创建带有查询字符串的 href 标记答案

【问题标题】：create a href tag with query string for a dynamic html tag inside a javascript file为 javascript 文件中的动态 html 标记创建带有查询字符串的 href 标记
【发布时间】：2019-07-08 18:55:26
【问题描述】：

我想创建一个带有查询字符串的href标签，href标签与通过Javascript代码动态生成的其他html标签连接在一起，所有代码都在.js文件中。

for (var k = 0; k < member.length; k++) {

        var selectedMember = member[k].memberid;
        var htmlth = "";
        htmlth = "<tr>" + "<th colspan='4'>" + member[k].membername + "</th>"+
            "<th colspan='2'>" + "<a href='Update.php?memberid= member[k].memberid  '>" +
            'Update' + "</a>" + "</th>" +"</tr>" 

        tableHtml.append(htmlth);

上述代码不起作用，因为 href 将 member[k].memberid 值视为字符串，我如何在标签内写入 member[k].memberid 值并分配给 href

【问题讨论】：

href 是锚标记的属性，a。就您的问题而言，您将在 th 标签内输出 member[k].membername 值；为member[k].memberid 值做类似的事情。
你没有关闭你的for循环。

标签： javascript jquery

【解决方案1】：

如果你需要一个优雅的 JQuery 实现，你可以试试这个：

let members = [
    {
        memberid: 1, 
        membername: 'jake'
    },
    {
        memberid: 2,
        membername: 'clement'
    },
    {
        memberid: 3, 
        membername: 'kelvin'
    }
];

let table = $('<table></table>');
for(var k = 0; k < members.length; k++) {
    const selectedMember = members[k];
    let htmlth = $(
        "<tr>" + 
            "<th colspan='4'>" +
                selectedMember.membername +
            "</th>" +
            "<th colspan='2'>" +
                "<a href='Update.php?memberid=" + selectedMember.memberid + "'>" +
                    "Update" +
                "</a>" +
            "</th>" +
        "</tr>"
    );
    table.append(htmlth);
}

$(document).ready(function(){
    $('body').append(table);
});

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="index.js"></script>
        <title>My test doc</title>
    </head>
    <body>
        <h3>welcome</h3>
    </body>
</html>

另外，请参阅 Fiddle 链接 here

我包含了对象数组，以便为您提供完整的运行代码。

您的代码的问题是您在字符串引号内包含了member[k].memberid。此外，您应该使用之前创建的selectedMember 变量来访问memberid 和membername。

【讨论】：

感谢您的回复和详细解释。
未来的观众应该注意，与最初问题中的代码一样，此解决方案极易通过membername 属性受到 XSS 攻击。
@IronFlare，XSS 预防应该是在从用户那里获取数据输入时提供的一种工具，而不一定是在这种情况下处理它时。在这里，membername 可以来自服务器端，也可以来自用户。因此，我必须从我的答案中“抽象”出该功能，以便它直接针对问题并且更清晰。但是，您提供的答案是可以的。有关使用 jQuery 防止 XSS 的其他方法，请参阅 (stackoverflow.com/questions/9735045/…) 和 (stackoverflow.com/questions/49590792/prevent-xss-in-jquery-html)
@UdoE。我理解你的观点。我认为当混合的服务器端和客户端解决方案更加健壮时，仅依靠服务器进行 XSS 保护是愚蠢的。鉴于询问者的初始代码很容易受到 XSS 攻击，我认为假设他们的数据库也没有受到保护是安全的，并且应该假设已经包含恶意条目。 jQuery 确实有一些实用程序可以缓解这种情况，但在代码中不使用它们时效果非常差。 :)

【解决方案2】：

我不熟悉 PHP，但它只是一个简单的 url 参数，所以我假设它与其他框架一样工作。您是否尝试过在变量之前终止字符串并在变量之后重新启动字符串？

"<a href='Update.php?memberid=' + member[k].memberid + '>"

【讨论】：

感谢您的快速回复，这里与php无关。 + member[k].memberid + is value is not access inside ，这就是问题所在。

【解决方案3】：

您必须终止字符串并使用 + 连接变量，但此代码在当前状态下极易受到 XSS（跨站点脚本）的攻击。如果用户可以操纵他们的membername 以包含<script>alert(1);</script>，他们就可以为任何加载它的人执行任意客户端代码。

我之前写了一个答案，使用document.createElement，cloneNode 来防止XSS，但是因为这只是提问者代码的一小部分，他们要求我简化它以便他们以后添加更多列。考虑到这一点，这里有一个修改版本，它仍然可以防止 XSS，但使用innerHTML 来定义模板行和类的结构，以针对使用不受信任的用户数据的元素。

let t_row = document.createElement("tr");
t_row.innerHTML = "<th class='mname' colspan='4'></th><th colspan='2'><a class='mupdate'>Update</a></th>";

for (var k = 0; k < member.length; k++) {
    let selectedMember = member[k].memberid;
    let curr_row = t_row.cloneNode(true);

    curr_row.querySelector('.mname').textContent = member[k].membername;
    curr_row.querySelector('.mupdate').setAttribute("href",`Update.php?memberid=${selectedMember}`);

    tableHtml.appendChild(curr_row);
    // ...
}

你可以看到这段代码在运行here。

【讨论】：

感谢您的宝贵时间和回复。尝试了您之前发布的代码，将 appendChild 修改为追加，然后代码可以工作，您能否建议我们是否可以按照我在问题中发布的方式进行操作，而不是使用 document.createElement 并附加所有内容，因为我有复杂的行我的更多代码。
是的，我可以，但是为了防止 XSS，会有一定程度的妥协。在短期内添加原始 HTML 代码肯定更容易，但 risk of someone abusing that 非常高。我会修改我的答案，然后标记你。
@Kavya 我对代码进行了全面检查，以便您更轻松地添加其他列。我没有将用户的membername 直接放在 HTML 中，而是使用类来定位每行中的元素并将数据添加为文本；这不会呈现为 HTML，因此不易受到 XSS 的攻击。
@Kavya 很高兴。如果我的回复回答了您的问题，请点击投票按钮下方的复选标记接受。