需要使用Javascript动态插入表单

Need to dynamically insert a form using Javascript

本文关键字：动态 插入 表单 Javascript      更新时间：2023-09-26

有这样的方法吗？我在使用.innerHTML方法方面收效甚微。

一些上下文，我是Javascript的新手，我正在尝试使用我在HTML，CSS和Javascript中的知识将文本RPG作为一个有趣的项目......后者我还没有太多经验。

该函数必须修改一个元素，插入一个要求字符名称的片段，以及表单以及提交按钮......然后获取他们输入的内容并修改一个 JSON 变量，该变量本质上将用作字符文件。

这一切都必须在客户端完成，如果可以帮助的话......有人可以帮忙吗？还是不给出一个彻底的解决方案，为我指出正确的方向？

您可以使用 Cookie 在浏览器上存储信息，例如玩家名称。示例是

document.cookie='PlayerName = ThatOneGuy';

您可以在 https://developer.mozilla.org/en-US/docs/Web_Development/HTTP_cookies 查看更多详细信息

下面

，我写了一些简单的dom操作，它创建一个表单，一个输入，当输入失去焦点时，将输入中的任何内容存储到cookie或localStorage中。

缺少一些内容，例如检查输入是否实际具有值，以及零错误检查。

您可以在此处，此处和此处了解有关localStorage的更多信息。您可以在此处了解有关 Cookie 的更多信息。 

function init_form(){
    var form = document.createElement('form');
    var input = document.createElement('input');
    input.setAttribute('id', 'player_name');
    input.setAttribute('placeholder', ' Enter Characters Name');
    input.setAttribute('type', 'text');
    form.appendChild(input);
    document.appendChild(form); //or document.getElementsByTagName('body')[0].innerHTML += form;
    input.addEventListener('blur', store_name_in_local_storage, false); 
}
function store_name_in_local_storage(){
    var name = document.getElementById('player_name');
    //check to see if browser supports local storage if it does, use it, if it doesn't use cookies
    if(!window.localStorage){
        document.cookie = 'player_name ='+ name;
    }else{
        localStorage.setItem('player_name', name);
    }
}
function get_player_name(){
    var name = '';
    //retrieve the cookie or local storage name
    if(!window.localStorage){
        name = document.cookie
    }else{
        name = localStorage.getItem('player_name');
    }
}

关于链接的注意事项：由于您不熟悉javascript，我将在localStorage上使用第二个链接，第一个是有关如何使用它的非常好的文档，第三个是该功能的实际规范页面。

此外，我包含了将 cookie 设置为彻底的代码，而不是因为您确实需要它。 localStorage一直支持IE8和所有其他主要浏览器。

如果你想检查任何javascript/html5功能的兼容性，我在这里建议。

祝你好运！

相关文章：