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

Answer 2

这是一般性描述：

创建：您可以使用document.createElement创建元素，然后使用各种insertion methods来元素插入某个位置（例如{{3} }}）。首先需要Node.appendChild到相关节点大多数浏览器还支持元素的innerHTML属性。您可以将该属性设置为HTML（或文本）字符串，并相应地更新元素的内容。
正在更新：这取决于您要更新的数据。例如。 input元素具有属性value。要更改文本输入的值，您需要首先获得对该元素的引用，然后您可以执行element.value = 'new value'。对于内容，您可以使用已经提到的innerHTML属性查看get references以查看他们拥有的属性。
正在删除：您需要HTML element reference。

我建议您查看Node.removeChild并了解浏览器的差异。

Answer 3

使用：

通过使用这些方法，您可以保留对元素的引用，以防您想要重新交换它们。任何事件处理程序也将保持附加到元素。

Answer 4

这取决于您对最有效的定义。

如果你的意思是最简单的方法，那么你可以使用像jQuery这样的库，并按照这样的方式执行：

$('form').html('<dynamic markup>');

如果您的意思是最高效的方式，您可以执行以下操作：

document.getElementByTagName('form').innerHTML = '<dynamic markup>';

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

4 个答案: