时间戳

首页 > 解决方案 > 每次调用 JS 函数时如何生成一个新的 HTML 元素

javascript - 每次调用 JS 函数时如何生成一个新的 HTML 元素

问题描述

我一直在开发一个使用蒸汽通过护照和会话登录的网络应用程序。最近我一直在努力寻找一种在页面上创建持久 html 的好方法。让我解释一下，这是我的 index.ejs ：

<!DOCTYPE html>
<html lang="en">
<%- include('partials/navbar') %>
<body>
<section id="chat"></section>
<section id="main" style="flexcol center" class="flexcol">
    <button id="newMatch">Create new match</button>
    <div class="match"></div>
</section>
</body>
<script src=".././scripts/jquery.js"></script>
<script src=".././scripts/script.js"></script>
</html>

我试图制作一个 js 函数，<div class="match"></div>每次调用时都会插入一个新函数，但没有成功。这是代码：

//CONTENT GENERATOR
    let main = document.querySelector('#main');
    let matchDiv = document.createElement('div');
    let matchDivText = document.createElement('h3');
    
    function createMatch(){
        $(matchDivText).append('New match').appendTo($(matchDiv));
        $(matchDiv).addClass('match flex center').appendTo(main);
    };
    
    $('button').click(() => {
        createMatch();
    });

现在，我的函数并没有真正完美地工作，它确实创建了一个新的 DIV，附加了 h2 并添加了类，但如果多次调用它看起来像这样（调用 3 次）：

n

我的问题是：如何让函数每次都创建一个新的 DIV，以及如何让这些 DIVS 在刷新后不消失？

标签： javascripthtmlnode.js

解决方案

问题是变量不在函数中，这样做：

function createMatch () {
        let main = document.querySelector('#main');
        let matchDiv = document.createElement('div');
        let matchDivText = document.createElement('h3');
        $(matchDivText).append('New match').appendTo($(matchDiv));
        $(matchDiv).addClass('match flex center').appendTo(main);
    };
    
    $('button').click(() => {
        createMatch();
    });

推荐阅读