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

标签 javascript html dom

我想知道从 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/

相关文章:

javascript - 页面加载时如何将 map 标记设置在 div 中心

javascript - 如何防止 HttpWatch 对 javascript 单行注释进行 404ing

php - 最小化 HTML、PHP 或 CSS 文件对网页来说真的是一个很大的改进,还是没有什么大的区别?

javascript - jsfiddle 和 codepen 不存储 window.localStorage 条目

php - 删除 DOM 警告 PHP

javascript - 如何使用 javascript 匹配和删除空白 html 标记?

javascript - 纯 CSS 视差 + 滚动显示导航

javascript - 未定义错误的属性在刷新时消失

html - 我应该使用 <button> 还是 <a>,提交样式化的 Web 表单

javascript - 更改动态生成的下拉列表的选定值