為什么我不能動態創建html元素？
[英]Why can't I create html element dynamically?
問題描述
我想創建動態段落，因此我編寫了以下代碼。 用戶單擊按鈕后，應添加一個新的段落，該段落的innerText是用戶的輸入。但是我失敗了，有人可以幫助我嗎？
var input = document.querySelector(".input"); var btn = document.querySelector("button"); var body = document.querySelector("body"); btn.addEventListener('click', addParagraph); function addParagraph() { var childELes = body.children; for (var p in childELes) { if (p.tagName === "p") p.remove(); } if (input.value.trim() != "") { var newPara = document.createElement("p"); newPara.innerText = input.value; body.appendChild(newPara); } }
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <form> <p> <label>input：</label> <input type="text" class="input"> <button>add</button> </p> </form> </body> </html>
6 個解決方案
解決方案1
3 2019-04-08 10:52:39
您的代碼正在運行，但是正在提交表單，這就是為什么動態增加的價值會丟失並刷新頁面的原因。 要使其按預期工作，您需要使用e.preventDefault(); 為了防止表單被提交：
var input = document.querySelector(".input"); var btn = document.querySelector("button"); var body = document.querySelector("body"); btn.addEventListener('click', addParagraph); function addParagraph(e) { e.preventDefault(); var childELes = body.children; for (var p in childELes) { if (p.tagName === "p") p.remove(); } if (input.value.trim() != "") { var newPara = document.createElement("p"); newPara.innerText = input.value; body.appendChild(newPara); } }
<form> <p> <label>input：</label> <input type="text" class="input"> <button>add</button> </p> </form>
解決方案2
2 已采納 2019-04-08 10:53:10
將type="button"添加到您的按鈕html標簽中：
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <form> <p> <label>input：</label> <input type="text" class="input"> <button type="button">add</button> </p> </form> <script type="text/javascript"> var input = document.querySelector(".input"); var btn = document.querySelector("button"); var body = document.querySelector("body"); btn.addEventListener('click', addParagraph); function addParagraph() { var childELes = body.children; for (var p in childELes) { if (p.tagName === "p") p.remove(); } if (input.value.trim() != "") { var newPara = document.createElement("p"); newPara.innerText = input.value; body.appendChild(newPara); } } </script> </body> </html>
解決方案3
1 2019-04-08 11:00:51
您可以只添加.preventDefault()來防止button刷新頁面。
var input = document.querySelector(".input"); var btn = document.querySelector("button"); var body = document.querySelector("body"); btn.addEventListener('click', addParagraph); function addParagraph(e) { e.preventDefault(); var childELes = body.children; for (var p in childELes) { if (p.tagName === "p") p.remove(); } if (input.value.trim() != "") { var newPara = document.createElement("p"); newPara.innerText = input.value; body.appendChild(newPara); } }
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <form> <p> <label>input：</label> <input type="text" class="input"> <button>add</button> </p> </form> </body> </html>
解決方案4
0 2019-04-08 10:56:03
這是因為表單中的按鈕調用submit並重新加載頁面。 您會在短時間內看到新的p-tag 。 但重新加載頁面和所有p一了。
將type="button"添加到您的按鈕以將其排除為提交按鈕，或在按鈕事件中使用event.preventDefault() 。
解決方案5
0 2019-04-08 10:56:13
您的代碼100％正確，唯一的問題是您的<button>add</button>正在執行回發操作，從而刷新了您的頁面。
您只需要在按鈕標簽中添加一種按鈕，它就會像這樣工作：
<button type="button">add</button>
希望這可以幫助
解決方案6
0 2019-04-08 11:06:49
function addParagraph(e) {
e.preventDefault();
var a = document.getElementById("inserted-p");
if(a != null) {a.remove();}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.id = "inserted-p";
newPara.innerText = input.value;
body.appendChild(newPara);
}
}
您的表單已發送，因此請致電
e.preventDefault()阻止它您的刪除無法正常工作，因為
p不是body的直接子對象，因此可以通過在插入的元素中添加id並使用適當的選擇器刪除標簽來對其進行修復
為什么我不能按ID（沒有iframe）訪問此動態加載的DOM元素？
[英]Why can't I access this dynamically loaded DOM element by ID (no iframes)?
為什么不能在Internet Explorer中使用JavaScript將行動態添加到HTML表中？
[英]Why can't I dynamically add rows to a HTML table using JavaScript in Internet Explorer?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.