我想知道从 html 页面动态更新、插入或删除元素的最有效方法。
这样做的结果是,我可以根据用户操作将 input 元素更改为 div 元素,反之亦然。
例如
<form><input type="text" value="Value to save"/></form>
根据一些事件,我会把它改成
<form><div>Value to Save</div></form>
发送
最佳答案
我认为您可以通过这种方式完成此任务(纯 JS,无需使用外部框架):
//retrieve the <form>
var form = document.getElementsByTagName('form')[0];
//retrieve the <input> inside the form
var input = form.getElementsByTagName('input')[0];
//create a new <div> DOM element
var newElement = document.createElement('div');
//The containing div text is equal to the input value (your case)
newElement.innerHTML = input.value;
//simple empty the form by set innerHTML = ""
form.innerHTML = "";
//append the <div> inside the form
form.appendChild(newElement);
顺便说一句,我建议你,如果你想以更简单的方式操作 DOM 并做类似的事情,学习如何使用 jQuery 或 mootools 等框架来做;)
关于javascript - 纯javascript dom动态插入、更新和删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4724830/