使用Javascript在DOM元素中添加元素

我有一个关于在DOM中动态添加元素的问题。我正在尝试创建一个网页，该网页有一个用于输入电子邮件的输入字段，当点击“添加电子邮件”按钮时，电子邮件被添加到HTMLDOM中。我已经创建了下面的代码，但它有几个问题，首先我希望每封电子邮件都以换行的形式出现，其次因为我使用clonenode（）输入元素，它看起来不好看。此外，我正在寻找更好的方法来完成同样的任务。第一个代码段是用于将电子邮件ID动态插入HTMLDOM的javascript，第二个代码段是html代码

函数插入（）
{
var elem=document.createElement（“电子邮件”）；
var elmnt=document.getElementById（“myForm”）.elements[0]；
var cln=elmnt.cloneNode（真）；
附肢儿童元素（cln）；
var元素=document.getElementById（“mydiv”）；
var child=document.getElementById（“edemo”）；
元素。插入前（元素，子元素）；
}	

在HTMLDOM中插入元素
输入电子邮件Id并点击添加电子邮件按钮以在HTML DOM中插入电子邮件

电子邮件：





添加电子邮件

因此，如果您想要：

使用带有输入和提交按钮的表单

按下提交按钮->将电子邮件添加到某个div后

您可以这样做：

//从dom获取元素
函数get（名称）{
返回文档。查询选择器（名称）；
}
//当页面元素就绪时
addEventListener（'load'，function（））{
//形成
get（“.js表单”）.addEventListener（“提交”，函数（）{
var email=get（“.js-form_email”）.value；
//创建电子邮件容器
var div=document.createElement（“div”）；
div.innerText=电子邮件；
获取（“.js电子邮件”）.appendChild（div）；
//从文本中清除字段
获取（“.js-form_email”）.value=“”；
});
}，假）


函数插入（）
{
var email=document.querySelector（“[type=email]”）。值；
如果（！validateEmail（电子邮件））
返回；
var li=document.createElement（“li”）；
li.innerHTML=电子邮件；
document.querySelector（“emailList”）.appendChild（li）；
document.querySelector（“[type=email]”）。value=“”；
}
功能验证邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
}
#addEmail，#addEmail:focus{
颜色：#009afd；
字体大小：粗体；
边界：无；
背景：无；
光标：指针；
字体大小：20px；
大纲：0；
}
#电子邮件列表李{
列表样式：无；
边框底部：实心1px#aaa；
填充：3倍；
}

在HTMLDOM中插入元素
输入电子邮件Id并点击添加电子邮件按钮以在HTML DOM中插入电子邮件



电邮：
+