讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > js教程 >

正文

0

0

有关JS文档碎片添加元素的详细讲解（图文教程）

亚连

亚连

发布时间：2018-05-18 14:36:24

|

1288人浏览过

|

来源于php中文网

原创

过js 操作dom节点可能以节点为单位进行,比如添加节点,可以createelement, createtextnode,然后用 appendchild把文本节点和容器节点绑定在一起,然后再用 appendchild或insertbefor添加到dom树中.但如果要往dom树中动态添加大量的节点.就会很麻烦.

例如:

var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
for(var i = 0;i
这段代码调用了十次document.body.appendChild(),每次都要产生一次页面刷新.很麻烦.所以可以用"文档碎片 ":
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
var oFragment = document.createDocumentFragment();
for(var i = 0;i
  1. function appendError (id, str) {  
        var spanNew = document.createElement("span" ); // 创建span 
        spanNew.id = id + "span" ; // 生成spanid 
        spanNew.style.color = "red" ;  
        spanNew.appendChild(document.createTextNode(str));// 给span添加内容 
        var inputId = document.getElementById(id);  
        inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span 
//如果需要在前面添加改成就可以了 
inputId.parentNode.insertBefore(spanNew, inputId);// 给需要添加元素后面添加span 
    }
 
 
 

Hello World! 
 

我可以被删除! 
 

在我上下添加一个元素吧！