javascript - 纯javascript dom动态插入、更新和删除

Question

我想知道从 html 页面动态更新、插入或删除元素的最有效方法。

这样做的结果是，我可以根据用户操作将 input 元素更改为 div 元素，反之亦然。

例如

<form><input type="text" value="Value to save"/></form>

根据一些事件，我会把它改成

<form><div>Value to Save</div></form>

发送

Answer 1

我认为您可以通过这种方式完成此任务(纯 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 等框架来做;)