js创建与追加元素
用javascript创建元素 :
var NewNode = document.creatElement('div');
结合appendChild与insertBefore插入到DOM树中
insertBefore:语法:
var insertedNode = parentNode.insertBefore(newNode,referenceNode)
例子
<div>
<button onclick="creatEle" id="btn">点击创建新btn</button>
<div> <script>
//创建一个新btn
var newBtn = document.creatElement('button');
newBtn.value="value";
newBtn.style.width = 50px;
newBtn.style.height = 50px;
//追加新创建的btn
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
//parentNode.insertBefore(newBtn,oldBtn);//在原有btn的前面插入新创建的btn;
parentNode.insertBefore(newBtn,oldBtn.nextSiblings)//将在原有btn的后面插入新创建的btn,!!!原因是没有insetAfter!!所以用nextSiblings
</script>
appendChild 语法
var aChild = element.appendChild(aChild);
例子
//html结构见上
var newBtn = document.creatElement('button');
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
parentNode.appendChild(newBtn); //MDN 例子
var p = document.createElement("p");
document.body.appendChild(p);
总结:两者都是在父元素内追加子元素,insertBefore可以通过referenceNode.siblings向后插入子元素。
参考:MDN Node.appendChild() document.createElement()的用法
js创建与追加元素的更多相关文章
- js中常用追加元素的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js追加元素
直接运行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())
最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787. ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js创建svg元素的方法
需要JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js追加元素,以及元素位置
function setShow(val_param,text){ var ul = document.getElementById("copyhere"); //<li&g ...
- js创建元素
js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在8 ...
- 【JavaScrpt】用js创建html上的元素
// 在body下创建一个div var createDiv=document.createElement("div"); createDiv.id='id_i'; createD ...
随机推荐
- 16-1-27---图解HTTP(02)
图解HTTP第四章 返回结果的HTTP状态码 HTTP状态码负责表示客户端HTTP请求的返回结果.标记服务器端的处理是否正常.通知出现错误等工作.4.1状态码告知从服务器端返回的请求结果 ...
- 数据库SQL优化大总结之 百万级数据库优化方案
1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- Difference between WCF and Web API and WCF REST and Web Service
The .Net framework has a number of technologies that allow you to create HTTP services such as Web S ...
- About_Smarty
Smarty是一个使用PHP写出来的模板PHP模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码 ...
- MongoDB 由于目标计算机积极拒绝,无法连接 2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errno:10061
转载自:http://www.cnblogs.com/xiaoit/p/3867573.html 1:启动MongoDB 2014-07-25T11:00:48.634+0800 warning: F ...
- 李洪强iOS经典面试题156 - Runtime详解(面试必备)
李洪强iOS经典面试题156 - Runtime详解(面试必备) 一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C ...
- const 使用一二
Primer C++ 练习题4.20: int i = -1; const int ic = i; 对于这个,一开始认为,ic 作为const 类型变量,定义时应该给其赋常值,而此处给的是变量i,因此 ...
- QT 文件对话框(QFileDialog)
1.选择文件(上传.打开...) QString QFileDialog::getOpenFileName( QWidget *parent = , //parent,用于指定父组件.注意,很多Qt组 ...
- PHP之几道面试题
1.二分查找算法 function two_find($arr,$low,$height,$k){ if($low<=$height){ $mid = intval(($low+$height) ...
- WebService的一些案例
既然要实现WebService,首先先来创建一个Service类 package cn.happy.webservice; import javax.jws.WebService; import ja ...