我有一些包含三项的 JSON 数据：踢球者、标题和链接。我将 kicker 和带有一些 JS 的标题插入到指定的 HTML 标签中，这些标签包含一个名为 placeholder_1 的变量。最后的数字加一（placeholder_2 placeholder_3 placeholder_4）。
但是我没有以正确的方式在 href 标签中插入链接。
<p class="main-title">placeholder_1 / <a href="placeholder_3">placeholder_2</a></p>
这是我的 HTML 代码、JSON 和 JS 脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>News | Modx 3.0.3 </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./assets/css/custom.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js">
</script>
<link href="./assets/img/favi.png" rel="icon" sizes="any" type="image/png">
</head>
<body id="top">
<header>
<section>
<div class="headlines">
<div class="section-title">
<h1 class="opinion-kk">Opinion</h1>
</div>
<div class="articles main-stories">
<img src="https://picsum.photos/300/200?random=1">
<div>
<p class="main-title">placeholder_1 / <a href="placeholder_3">placeholder_2</a></p>
<p class="mainPara">Temporibus et repudiandae neque.</p>
</div>
class="sub-title"><strong>Et /</strong> <a href="#">Consectetur debitis non et amet eum</a></p>
</div>
<div class="articles secondary-stories add-subtitle">
<img src="https://picsum.photos/300/200?random=2">
<p class="secondary-title"><strong>placeholder_4 /</strong> <a href="placeholder_6">placeholder_5</a></p>
<p class="sub-title"><strong>Ut /</strong> <a href="#">Quia tempora iste sed dolorem</a></p>
</div>
<div class="articles secondary-stories">
<img src="./assets/img/s_493.jpg">
<p><strong>placeholder_7 /</strong> <a href="placeholder_9">placeholder_8</a></p>
</div>
</div>
</section>
</header>
<script>
var jsonData = [
{
"kicker": "Turkey",
"headline": "Hatay hit by new 6.4-magnitude earthquake",
"link": "https://www.theguardian.com/world/2023/feb/20/turkey-new-6-point-4-magnitude-earthquake-hatay",
},
{
"kicker": "Israel",
"headline": "Benjamin Netanyahu accuses protesters of ‘trampling democracy’",
"link": "https://www.theguardian.com/world/2023/feb/20/israel-benjamin-netanyahu-accuses-protesters-of-trampling-democracy",
},
{
"kicker": "Live",
"headline": "Russia-Ukraine war: Joe Biden’s surprise visit to Kyiv ‘unprecedented in modern times’, says US",
"link": "https://www.theguardian.com/world/live/2023/feb/20/russia-ukraine-war-live-updates-latest-news-foreign-ministers-eu-ammunition-deal",
},
{
"kicker": "Folly of Gossip",
"headline": "A look into Sydney’s early drag scene",
"link": "https://www.theguardian.com/artanddesign/gallery/2023/feb/20/folly-of-gossip-a-look-into-sydneys-early-drag-scene-in-pictures"
}
]
$(document).ready(function () {
var k = 1;
//loop through json data and insert into corresponding divs
for (var i = 0; i < jsonData.length; i++) {
document.getElementById("placeholder_" + (k)).innerText = jsonData[i].kicker;
document.getElementById("placeholder_" + (k = k + 1)).innerText = jsonData[i].headline;
document.getElementById("placeholder_" + (k = k + 1)).href = jsonData[i].link;
k = k + 1;
}
});
</script>
</body>
</html>
要将 JSON 数据中的链接插入到 a 标签的 href 属性中，您可以使用与插入 kicker 和标题相同的方法。
假设您的 JSON 数据看起来像这样：
json
{
"kicker": "Sports",
"headline": "Lorem ipsum dolor sit amet",
"link": "https://example.com/article123"
}
您可以修改您的 JavaScript 代码以将数据插入 HTML，如下所示：
javascript
// assuming that the JSON data is stored in a variable called "data"
const mainTitle = document.querySelector('.main-title');
const kicker = data.kicker;
const headline = data.headline;
const link = data.link;
// set the text content of the kicker and the headline
mainTitle.textContent = `${kicker} / `;
const headlineLink = document.createElement('a');
headlineLink.textContent = headline;
headlineLink.href = link;
mainTitle.appendChild(headlineLink);
此代码创建一个新的 a 元素，将其 href 属性设置为 JSON 数据中 link 属性的值，并将其文本内容设置为 headline 属性的值。最后，它将 a 元素附加到您在 HTML 中定义的 mainTitle 元素。
通过此修改，a 标签的 href 属性将设置为来自 JSON 数据的正确值。