DOM / jQuery创建节点及节点属性
Posted 在路上别等待
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM / jQuery创建节点及节点属性相关的知识，希望对你有一定的参考价值。
DOM创建节点及节点属性
创建流程：
创建节点（如：元素、属性和文本等）
添加节点的一些属性
加入文档中
流程中设涉及的一些方法：
创建元素： document.createElement
设置属性：setAttribute
添加文本：innerhtml
加入文档：appendChild
如：
<body>
<h2>动态创建元素节点</h2>
<div class="left">
<div class="aaron">点击body区域会动态创建元素节点</div>
</div>
<script>
//获得文档中的body元素
var body=document.querySelect('body')，
document.addEventListener( 'click' , function(){
//创建2个div元素
var a=document.createElement( 'div' );
var b=documentcreateElement( 'div' );
//给div添加属性
a.setAttibute( 'class' , ' a ' ) ;
b.className( ' b ' );
b.innerHTML( "这是动态添加的DIV" );
//将b元素加入到a
a.appendChild( ' b ' );
//绘制到body元素中
body.appendChild( ' a ' );
} , false)
</script>
</body>
注：addEventListener()方法 //用于向指定元素添加事件句柄
语法：element.addEventListener(event, function, useCapture)
更多实例请查看：http://www.runoob.com/jsref/met-element-addeventlistener.html
jQuery节点创建与属性的处理
创建元素节点：（ 通过$()函数处理，$("html结构") ）
$( " <div> </div> " );
创建文本节点：
$( " <div> 我是文本节点 </div> " );
创建属性节点：
$( " <div id='text ' class='aaron '> 我是文本节点 </div> " );
即：$( " <div class='aaron '> <div class='left'>动态创建div节点 </div></div> " );
如：
<body>
<h2>动态创建元素节点</h2>
<button>点击按钮动态创建div元素</button>
<script>
var $body= $(' body ');
$body.on('click',function(){
var div=$(" <div class='aaron '> <div class='left'>动态创建div节点 </div></div>")
$body.append( ' div ' )
})
</script>
</body>
以上是关于DOM / jQuery创建节点及节点属性的主要内容，如果未能解决你的问题，请参考以下文章
jQuery基础（DOM篇，append()，after()，prepend()，insertAfter()，节点删除，遍历方法each()）