Javascript 如何直接在html文件中写入变量中的一些数据_Javascript_Html_Jquery_Css

Javascript 如何直接在html文件中写入变量中的一些数据

javascript html jquery css

Javascript 如何直接在html文件中写入变量中的一些数据,javascript,html,jquery,css,Javascript,Html,Jquery,Css,所以我不知道如何问这个问题，但我想找到一种方法，将变量中的信息直接放入html文件中所以我有一个像这样的js文件 const list = { "list1": [ { "records": [ { "user": "Someone",

所以我不知道如何问这个问题，但我想找到一种方法，将变量中的信息直接放入html文件中

所以我有一个像这样的js文件

    const list = {
        "list1": [
            {
                "records": [
                    {
                        "user": "Someone",
                        "link": "link"
                    },
                    {
                        "user": "Someone 2",
                        "link": "link"                 
                    },
                ],
                
                /////////////////////////////

                "name": "SOMETHING",
                "author": "someone",
                "id": 12345678,
                "vid": "link",
                "iframe": "link"

                /////////////////////////////
            },

以及来自诸如

list.list1[0].user等记录的信息，要使该字符串直接显示在html文件上，单击该字符串时，将打开“链接”
，而无需对每个字符串使用函数
html看起来像
<!DOCTYPE html>

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Alf">
<title>Example</title>
<link rel="stylesheet" media="screen and (min-device-width: 320px)"href="../../css/320style.css">
<link rel="stylesheet" media="screen and (min-device-width: 760px)"href="../../css/760style.css">
<link rel="stylesheet" media="screen and (min-device-width: 900px)"href="../../css/900style.css">
<link rel="stylesheet" media="screen and (min-device-width: 1200px)"href="../../css/1200style.css">
<link rel="icon" href="../../images/icon.png">
</head>

<body>

    <div class="navbar">
        <li>
        <button onclick="location.href='../../../index.html';">HOME</button>
        <button onclick="location.href='../../index.html';">LIST</button>
        <button class="legacybtn" onclick="location.href='../../legacy.html';">LEGACY</button>
        <button class="apibtn" style="float: right;" onclick="location.href='../../doc.html'">DOC</button>
        <button class="submitbtn" style="float: right;" onclick="submitRecord()">SUBMIT</button>
        <button class="submitbtn" style="float: right;" onclick="location.href='../../user.html';">USER</button>
        </li>
    </div>
    <center><img class="logo" src="../../images/logo.png"></center>

<div class="bg5">

    <p class="title" id="levelname"></p><a href="../2"><p class="ttitle"> ></p></a><br>
    <p class="subtitle" id="levelauthor"></p>

    <iframe class="vid" id="iframe1" frameborder="0" allowfullscreen></iframe><br><br><br>>

    <center><h1 class="subtitle" id="levelid"></h1></center>

    <div class="records">
        <h1 class="title2">RECORDS</h1>
        <p class="recordd2" id="record1x2" onclick="video1x2()"></p>
        <p class="recordd" id="record1x3" onclick="video1x3()"></p>
        <p class="recordd2" id="record1x4" onclick="video1x4()"></p>
        <p class="recordd" id="record1x5" onclick="video1x5()"></p>
    </div>
</div>

<center><p class="userpoint">&copy; Alf 2021</p></center>

<script src="../../js/main.js"></script>
<script src="../../js/level.js"></script>
<script src="../../js/video.js"></script>
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery1.js"></script>
<script src="../../js/list.js"></script>
<script src="../../js/user.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    document.getElementById('levelname').innerText = shitty.list[0].name;
    document.getElementById('levelauthor').innerText = shitty.list[0].author;
    document.getElementById('levelid').innerText = "ID: " + shitty.list[0].id;

    document.getElementById('iframe1').src = shitty.list[0].iframe;

    document.getElementById('record1x2').innerText = shitty.list[0].records[0].user + " | " + shitty.list[0].records[0].hz;
    document.getElementById('record1x3').innerText = shitty.list[0].records[1].user + " | " + shitty.list[0].records[1].hz;
    document.getElementById('record1x4').innerText = shitty.list[0].records[2].user + " | " + shitty.list[0].records[2].hz;
    document.getElementById('record1x5').innerText = shitty.list[0].records[3].user + " | " + shitty.list[0].records[3].hz;
    
</script>

</body>

</html>

我真的不知道如何解释这件事，但我只是不想复制和粘贴相同的代码来编写所有这些“记录”，而是要使用一个代码来自动完成，同样的链接打开
我希望你至少能理解一点我想要什么
最终的结果应该是，我在“记录”中添加了一行，所以我只需添加
{
                        "user": "Someone 3",
                        "link": "link"                 
                    },

它写在html上
谢谢：）

const list={
“清单1”：[
{
“记录”：[
{
“用户”：“某人”，
“链接”：“链接”
},
{
“用户”：“某人2”，
“链接”：“链接”
},
],
/////////////////////////////
“名字”：“某物”，
“作者”：“某人”，
“id”：12345678，
“视频”：“链接”，
“iframe”：“链接”
/////////////////////////////
}，

例子

家
列表
遗产
文件
提交
使用者







>
记录




©；Alf 2021
document.getElementById（'levelname'）。innerText=list.list1[0]。名称；
document.getElementById（'levelauthor'）。innerText=list.list1[0]。作者；
document.getElementById（'levelid'）。innerText=“ID:”+list.list1[0]。ID；
document.getElementById（'iframe1'）。src=list.list1[0]。iframe；
document.getElementById（'record1x2'）。innerText=list.list1[0]。记录[0]。用户
document.getElementById（'record1x3'）。innerText=list.list1[0]。记录[1]。用户
document.getElementById（'record1x4'）。innerText=list.list1[0]。记录[2]。用户
document.getElementById（'record1x5'）。innerText=list.list1[0]。记录[3]。用户
您可以使用$在记录
json数组中循环。每个循环，然后使用用户和链接在该循环中生成p
标记，然后将生成的html追加到记录
div中
演示代码：

const list={
“清单1”：[{
“记录”：[{
“用户”：“某人”，
“链接”：“链接1”
},
{
“用户”：“某人2”，
“链接”：“链接2”
},
{
“用户”：“某人3”，
“链接”：“链接3”
}, {
“用户”：“某人4”，
“链接”：“链接4”
}
],
“名字”：“某物”，
“作者”：“某人”，
“id”：12345678，
“视频”：“链接”，
“iframe”：“链接”
}]
}
$（'#levelname'）.text（list.list1[0].name）；
$（'#levelauthor'）.text（list.list1[0].author）；
$（'#levelid'）.text（“ID:+list.list1[0].ID”）；
$（'iframe1'）.attr（'src'，list.list1[0].iframe）；
var html=“”；
//循环记录json数组
$.each（list.list1[0]。记录，函数（i，vv）{
//如果'i'值甚至是一个类或另一个类。。
var class_name=i%2==0？“recordd2”：“recordd”
//附加链接和用户名
html+=`${vv.user}
`
})
$（“.records”）.append（html）//在div中追加p
.recordd2{
背景颜色：蓝色；
}
.记录{
背景颜色：粉红色；
}








>
记录
你是在问如何创建一个标签吗？你为什么使用带有onclick
的按钮来代替a
标签而使用呢？p元素上的onclick用于打开一个带有链接的新标签，是的，也许我需要一个循环，在你用jquery打开时自动写入变量的信息？你还需要要为每个记录生成整个html，即：
？@Swati对jquery是，对第二个问题不是，我只需要
和所有元素，这些元素会自动添加到我添加的每个记录中。好了，谢谢它能工作，最后一件事会很酷，我的原始记录上有两个类，recordd
和recordd2这使记录在背景上交替颜色。有没有办法在录制完后，先放一个recordd2，然后放一个recordd，然后再放一个recordd2…这样做的话，更新了我的答案：）
{
                        "user": "Someone 3",
                        "link": "link"                 
                    },