[英]How to add fragment of DOM module into existing document using javascript
我有一個 html 文件，其中有兩個帶有各種嵌套元素的 div 元素。
<div id="App1" class="app">
<p class="header">Application 1 : User Registration</p>
<form>
<label>User Name</label>
<input type="text" name="firstname" placeholder="Your name..">
<div>
<input type="radio" name="Gender"> Male
<input type="radio" name="Gender"> Female
</div>
<label>Address</label>
<textarea></textarea>
<br/>
<input type="submit" value="Submit">
</form>
</div>
<div id="App2" class="app">
<p class="header">Application 2 : Global car search</p>
<form>
<table>
<tr>
<td>
Make Name
</td>
<td>
<input type="text" name="firstname" placeholder="Car make company..">
</td>
</tr>
<tr>
<td>
Car Type
</td>
<td>
<input type="radio" name="Type"> Old
<input type="radio" name="Type"> New
</td>
</tr>
<tr>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>
</form>
</div>
現在我使用remove()方法從文檔中刪除#App1
var app1 = document.querySelector('#App1');
app1.remove();
//how to add back ???
現在將此片段再次添加到文檔中的最佳方法是什么？
請建議，可能的解決方案。
引用app1的父級
var app1 = document.querySelector('#App1');
app1Parent = app1.parentElement;
app1.remove();
app1Parent.appendChild(app1);
您可以使用.cloneNode(true)和.cloneNode(true) .insertBefore()
var app1 = document.querySelector("#App1"); var clone = app1.cloneNode(true); app1.remove(); var sibling = document.querySelector("#App2"); setTimeout(function() { sibling.parentElement.insertBefore(clone, sibling); }, 3000);
.app { float: left; overflow: auto; margin: 10px; border: 2px dashed #ccc; min-height: 400px; min-width: 45%; width: inherit; padding: 2px; }
<!DOCTYPE html> <html> <head> </head> <body> <div id="App1" class="app"> <p class="header">Application 1 : User Registration</p> <form> <label>User Name</label> <input type="text" name="firstname" placeholder="Your name.."> <div> <input type="radio" name="Gender"> Male <input type="radio" name="Gender"> Female </div> <label>Address</label> <textarea></textarea> <br/> <input type="submit" value="Submit"> </form> </div> <div id="App2" class="app"> <p class="header">Application 2 : Global car search</p> <form> <table> <tr> <td> Make Name </td> <td> <input type="text" name="firstname" placeholder="Car make company.."> </td> </tr> <tr> <td> Car Type </td> <td> <input type="radio" name="Type"> Old <input type="radio" name="Type"> New </td> </tr> <tr> <td> <input type="submit" value="Search"> </td> </tr> </table> </form> </div> </body> </html>
在使用JavaScript附加到DOM之前，隨機改組現有文檔片段
[英]Randomly shuffle existing Document Fragment before appending to DOM with JavaScript
如何添加 <map> -使用JavaScript中的DOM操縱功能的文檔元素？
[英]How to add a <map>-Element to a document using DOM manipulating functions in JavaScript?
是否有將項目添加到 DOM 中的現有列表（javascript）
[英]Is there anyway to add items to an existing list in the DOM (javascript)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.