如何使用 Javascript 创建 HTML 元素并将它们应用于不同的 HTML 文件？答案

【问题标题】：How to create HTML elements and apply them to a different HTML file using Javascript?如何使用 Javascript 创建 HTML 元素并将它们应用于不同的 HTML 文件？
【发布时间】：2020-04-26 18:52:06
【问题描述】：

我正在尝试创建几个网页，让我可以在 input.html 上填写表格并将输入的数据附加到另一个 HTML 文件 index.html。

我已经找了几个小时的答案，这可能会让我发疯！

这是我正在尝试做的一些示例代码：

HTML 表单input.hmtl:

<form>
   <label>
      Enter something:
      <input type="text" id="userinput" required>
   </label>
   <input type="submit" id="submit" value="submitted">
</form>

Javascript 获取输入的数据并传递给index.html:

var userInput = document.querySelector("#userinput");
var submit = document.querySelector("#submit");

function addToIndex() 
{
   // create new element on index.html
}

submit.addEventListener("click", addToIndex, false);

HTML 输出文件index.html:

<div id="contentstart">
   <!-- newly created element here -->
</div>

我曾尝试使用this 解决方案，但Chrome 的控制台给了我一个错误并告诉我newWindow is not a function。我只是偶然发现在几个答案中使用了<iframe> 元素，但还不太明白（我是菜鸟）。

提前致谢！

【问题讨论】：

数据接收通常由 PHP 等服务器端语言处理。 JavaScript 不能接收 post 数据，但它可以接收 GET 数据（即在 URL 中发送的数据）。考虑一下您是否希望通过页面转换或通过弹出窗口接收数据，因为这将告知您采用哪种方法。
您是否正在寻找一种无需服务器语言即可共享数据的方法？可以使用 URL 片段或浏览器存储来完成。
@Utkanos 我相信我希望它发生在页面转换上，这样输入的数据就会与index.html 中的其他元素一起显示。这不应该花这么长的时间（我用它作为一种学习考试的方式，但走得更远），用 PHP 实现有多难？
@wizardzeb 最初的目标是让用户在表单上输入数据，然后 javascript 获取该数据并使用它在index.html 上创建新元素。如果可以不学习另一种编程语言就可以做到，我很乐意听到解决方案！
@Utkanos 有趣，我一定要研究 PHP！感谢您的信息！

标签： javascript html

【解决方案1】：

最好的选择是使用 Web 服务器或无服务器实现。服务器代码可以用多种语言编写。一些语言包括 PHP、NodeJS 和 ASP.NET。

但是，您可以使用浏览器存储来传递数据。

但是，浏览器存储并不安全，用户可以随时擦除。如果您存储的信息（例如密码或数据）应该对多个用户可见，则应使用 Web 服务器和/或数据库。

您需要在两个页面上都有一个脚本。带有表单的页面将存储/设置数据。索引页面将检索数据并使用 javascript 呈现更多内容。

function addToIndex() 
{
   localStorage.setItem('input', userInput .value)
}

索引页面的脚本看起来像这样。

var data = localStorage.getItem('input');
if (input) {
  document.querySelector('#contentstart').innerHTML = data;
}

我在这里整理了一个简单的演示。 http://plnkr.co/edit/iAitGxtdsHwXowNg

【讨论】：

这行得通！我假设使用 PHP 可以更轻松地向网页动态添加内容，而无需进入文件本身并添加多个变量以存储在 localStorage?感谢您的帮助！

【解决方案2】：

要从不同文件中的表单接收数据，您需要一种服务器端语言，例如 php。所以表单会有这样的结构

<form action="external_file.php" method="get">
   <label>
      Enter something:
      <input type="text" id="userinput" name="user_input" required>
   </label>
   <input type="submit" id="submit" value="submitted">
</form>

注意添加到输入元素的action="external_file.php 和name="user_input" 属性。然后文件：external_file.php 可能具有以下结构来接收来自表单的内容

<?php
$input = $_GET["user_input"];
//do something with $input
echo 'The data you entered is: ' . $input;
?>

【讨论】：

所以我看到PHP文件接收到了用户数据，但是它可以用来在不同的HTML文件中创建新元素吗？

【解决方案3】：

我向你展示了开始的方式。剩下的就看你自己了，你可以做任何你想做的事。我希望你能帮忙。

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>

        <form id ="form">
            <label>
               Enter something:
               <input type="text" id="userinput" required>
            </label>
            <input type="submit" id="submit" value="submitted">
         </form>


         <script>

    let form = document.getElementById("form");
    let userInput = document.getElementById("userinput");
    form.addEventListener("submit", submitForm) //this function will work when the form is submit

    function submitForm (e) {
        e.preventDefault() // this event will prevent page refresh when form submit
        let userInputValue = userInput.value; // userinput value 
        console.log(userInputValue);
        moveToAnotherPage(userInputValue); //we send the value we get from userinput to use in another function.
    }

    function moveToAnotherPage (value) {



          // Select the index2 html elements and add with innerhtml or something. 
//to do this, you may need to save the userinput value you received to localStorage and pull it from it. I suggest you look into localStorage .And if you know php, you can use it.

    }

         </script>


    </body>
    </html>

【讨论】：

没有解释的代码对菜鸟的帮助有限。最好解释你的答案。
我已经清除并重新排列了代码。即使你是菜鸟，你也需要了解一些基础知识。这不是教程课程，而是纠正错误的平台。我该如何解释更多？一切看起来都非常干净和简单。