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

Question

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

结果是,我可以根据用户操作将输入元素更改为div元素,反之亦然.

例如

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

并根据某些事件,我会改变它

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

TX

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等框架来做到这一点;)