Question

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

＆＃13;

<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>

＆＃13;

<!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>

＆＃13;

Answer 1

所以，如果你想：

具有输入和提交按钮的表单
按下提交按钮后 - ＆gt;添加电子邮件给某个div

你可以这样做：

＆＃13;

// 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);

＆＃13;

<form class="js-form">
  <input type="text" class="js-form_email" placeholder="Enter email here">
  <input type="submit">
</form>

<div class="js-emails">
</div>

＆＃13;

Answer 2

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>

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

2 个答案: