是否有在 html 中动态生成 href 的 JSON 解决方案？答案

【问题标题】：is there a JSON solution to dynamic generate href in html?是否有在 html 中动态生成 href 的 JSON 解决方案？
【发布时间】：2022-01-03 04:41:18
【问题描述】：

我正在制作一个显示由 JSON 控制的动态 href 链接的 html 页面。

 <a href="https://wa.me/923002546363" target="_blank">open chat</a>

我已经构建了以下 HTML 代码，用于在 HTML 页面上显示手机号码。但我无法将该 JSON 文件的手机号码转换为上图所示的 href。因此，当我们添加一个新号码时，它会自动作为一个超链接出现在前端，我们可以使用它来打开聊天。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp Chat Software</title>


<body>
    <div id="myData"></div>
    <script>
        fetch('number.json')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML = 'Mobile No: ' + data[i].MobileNo
                
                mainContainer.appendChild(div);
            }
        }
    </script>
</body>
</html>

下面是number.json

[
    {
        "id": "1",
        "MobileNo": "923002546363"

    },
    {
        "id": "2",
        "MobileNo": "923343676143"

    }
]

【问题讨论】：

你不是在创建<a>，你只是在创建<div>。
谢谢。用你的解决方案问题就解决了。 :-)
What to do when someone answers your question

标签： javascript html json

【解决方案1】：

使用document.createElement('a')创建一个锚点，并设置它的href。

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    var a = document.createElement('a');
    a.href = `https://wa.me/${data[i].MobileNo}`;
    a.innerText = 'Open chat';
    div.appendChild(a);
    mainContainer.appendChild(div);
  }
}

【讨论】：