Div 是在提交表单时创建的答案

【问题标题】：Div is created upon submitting a formDiv 是在提交表单时创建的
【发布时间】：2017-03-17 04:00:40
【问题描述】：

我是网络开发新手，目前正在构建一个旅行计划器。我有一个活动 div，当您单击加号时，表单会向下滑动以插入有关此活动的信息。本质上，我想在每次用户点击提交时使用此表单中输入的信息创建一个 div。我不知道这叫什么，或者如何实现，任何反馈都非常感谢。

【问题讨论】：

我会考虑默认隐藏 div，然后在单击后变为可见。类似于 的内容，以及将更改显示样式的脚本 onClick()跨度>
我不是反对票，但您的问题太笼统，无法回答。您可能想要改写并更具体，以便人们可以真正帮助您。您是否尝试过解决此问题？如果没有，请尝试一下，然后回到你被卡住的地方。
进一步扩展，我不确定是否真的可以创建这样的 div。将 div 与页面的其余部分一起加载并在需要用户查看时显示它会简单得多。
感谢您的反馈，@JohnnyQ 相信我，如果我知道它叫什么，我不会发布这个问题，但下次我会考虑您所说的 :)

标签： javascript jquery html forms reactjs

【解决方案1】：

您可以做的是创建一个函数来动态创建要向用户显示的元素并在提交按钮的 onClick 处理程序上调用该函数。

可能是这样的：

function create() {
    var parent = document.createElement('div');
    parent.className = 'parent';

    //you would have a child element for each bit of data the user has input
    var child = document.createElement('div');
    child.className = 'child';
    parent.appendChild(child);

    //append the newly created div to your container
    var container = document.getElementById('container');
    container.appendChild(parent);
}

然后将其添加到按钮 onclick 监听器

var button = document.getElementById('button');
button.addEventListener('click', create);

如果同一个用户多次输入数据，这将具有能够被多次调用的优点。

但是，如果只需要显示一次，您就可以将所有内容都已经存在但不显示并将其显示属性设置为“inline-block”而不是“none”

如果您愿意，您可以使用 CSS 动画属性将 div 向下滑动（或任何您想要的动画）。

【讨论】：

【解决方案2】：

function  createDiv(){
var i=1;
            var ele = document.createElement("div");
            ele.setAttribute("id","DivId"+i);
            ele.setAttribute("class","inner");
            ele.innerHTML="hi "+i;
            output.appendChild(ele);
		
		}

<div id="output" class="out">

</div>
<input type="button" onclick="createDiv();" name="submit" >

【讨论】：

谢谢，这就是我想要完成的！

【解决方案3】：

为表单 div 编写 html 代码。将其保存为变量中的文本

(var html = "...")

并使用 jQuery

$("#divId").append(html)

【讨论】：

谢谢！我会试试的