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

Adding elements in DOM elements using Javascript

本文关键字：元素 添加 DOM Javascript 使用      更新时间：2024-06-01

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

<script>
	
		function insert()
		{
	
			var elem = document.createElement("email"); 
			var elmnt = document.getElementById("myForm").elements[0];
    		var cln = elmnt.cloneNode(true);
   		    elem.appendChild(cln);
    		var element = document.getElementById("mydiv");
    		var child = document.getElementById("edemo");
   			element.insertBefore(elem,child);
		}	
	
	</script>
<!DOCTYPE html>
<head>
	
	<meta charset="utf-8">
	<link rel="stylesheet" href="mystyleassign7-1.css"/>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
	</script>
	<![endif]-->
</head>
<body>
	<h2> Inserting Elements in HTML DOM</h2>
	<p> Enter Email Id and hit Add Email button to insert Email in HTML DOM
	</p>
	<form id="myForm" >
	<label>E-mail : </label>   <input type="email" placeholder="Enter E-mail Here" name="em" autofocus><br>
	  
	</form>
	<br>
	<br>
	<button onclick="insert()">Add Email!</button><br>
	<div id="mydiv">
	<email id="edemo"></email>
	</div>
</body>
	
</html>

因此，如果您想要：

  1. 具有带有输入和提交按钮的表单
  2. 按下提交按钮->将电子邮件添加到某个div

你可以这样做：

// Get element from dom
function get(name){
  return document.querySelector(name);
}
// When page elements are ready
window.addEventListener('load', function(){
  // Get form
  get(".js-form").addEventListener("submit", function(){
    var email = get(".js-form_email").value;
    // Create container for email
    var div = document.createElement("div");
    div.innerText = email;
    get(".js-emails").appendChild(div);
    // clear field from text
    get(".js-form_email").value = "";
  });
}, false);
<form class="js-form">
  <input type="text" class="js-form_email" placeholder="Enter email here">
  <input type="submit">
</form>
<div class="js-emails">
</div>

function insert()
{
  var email= document.querySelector("[type=email]").value;
  
  if( !validateEmail(email) )
    return;
  var li = document.createElement("li");
  li.innerHTML= email;
  document.querySelector("#emailList").appendChild(li);
  document.querySelector("[type=email]").value= "";
}
function validateEmail(email) { 
    var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 
#addEmail,#addEmail:focus{
  color: #009afd;
  font-weight:bold;
  border:none;
  background:none;
  cursor:pointer;
  font-size:20px;
  outline:0;
}
#emailList li{
  list-style:none;
  border-bottom: solid 1px #aaa;
  padding:3px;
}
<!DOCTYPE html>
<head>
	
	<meta charset="utf-8">
	<link rel="stylesheet" href="mystyleassign7-1.css"/>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
	</script>
	<![endif]-->
</head>
<body>
	<h2> Inserting Elements in HTML DOM</h2>
	<p> Enter Email Id and hit Add Email button to insert Email in HTML DOM
	</p>
    <ul id="emailList">
       
    </ul>
	<form id="myForm" >
	  <label>E-mail : </label>
      <input type="email" placeholder="Enter E-mail Here" name="em" required autofocus>             
      <button id="addEmail" onclick="insert()">+</button><br>
	  
	</form>
	<div id="mydiv">
	<email id="edemo"></email>
	</div>
</body>
	
</html>

相关文章：