gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 15:04:22 24 4
gpt4 key购买 nike

我一直在开发一个使用 steam 通过 passport 和 session 登录的 webapp。最近我一直在努力寻找一种在页面上创建持久性 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 在刷新后不消失?

最佳答案

问题是变量不在函数中,这样做:

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();
});

关于javascript - 如何在每次调用 JS 函数时生成一个新的 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66441128/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com