[jQuery教程]DOM节点的创建方法（四）

DOM 由节点构成，理解和掌握节点是很重要的，本章介绍如何创建 DOM 节点及节点属性。

DOM 创建节点及节点属性

通过 JavaScript 可以很方便的获取 DOM 节点，从而进行一系列的 DOM 操作。但实际上一般开发者都习惯性的先定义好 HTML 结构，但这样就非常不灵活了。

试想下这样的情况：如果我们通过 AJAX 获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了。

本文向大家介绍一下如何使用 JavaScript 创建 div 节点元素，主要包括创建 div 节点元素的属性和创建 div 节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。

先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的 IE 兼容问题）。

创建流程比较简单，大体如下：

1. 创建节点(常见的：元素、属性和文本)
2. 添加节点的一些属性
3. 加入到文档中

流程中涉及的一点方法：

1. 创建元素：document.createElement
2. 设置属性：setAttribute
3. 添加文本：innerHTML
4. 加入文档：appendChild

我们看一下下面简单例子
HTML 代码：

<h2>动态创建元素节点</h2>
<div class="left">
	<div class="aaron">点击 body 区域会动态创建元素节点</div>
</div></pre>

CSS 代码：

.left,
.right {
	width: 300px;
	height: 120px;
}

.left div,
.right div {
	width: 100px;
	height: 90px;
	padding: 5px;
	margin: 5px;
	float: left;
	border: 1px solid #ccc;
}

.left div {
	background: #bbffaa;
}

.right div {
	background: yellow;
}

javascript 代码：

var body = document.querySelector('body');

document.addEventListener('click', function() {

	//创建 2 个 div 元素
	var rightdiv = document.createElement('div')
	var rightaaron = document.createElement("div");

	//给 2 个 div 设置不同的属性
	rightdiv.setAttribute('class', 'right')
	rightaaron.className = 'aaron'
	rightaaron.innerHTML = "动态创建 DIV 元素节点";

	//2 个 div 合并成包含关系
	rightdiv.appendChild(rightaaron)

	//绘制到页面 body
	body.appendChild(rightdiv)

}, false)

效果展示：

如上面代码所示，写一个最简单的元素创建，我们会发现几个问题：

1. 每一个元素节点都必须单独创建
2. 节点是属性需要单独设置，而且设置的接口不是很统一
3. 添加到指定的元素位置不灵活
4. 最后还有一个最重要的：浏览器兼容问题处理

针对这一系列的 DOM 操作的问题，jQuery 给出了一套非常完美的接口方法，我们之后就开始深入学习。

jQuery 节点创建与属性的处理

上面介绍了通过 JavaScript 原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用 jQuery 来简化了这个过程

创建元素节点：

可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过 HTML 标记字符串描述出来，通过$()函数处理，$(“html 结构”)

$("<div></div>")

创建为本节点：

与创建元素节点类似，可以直接把文本内容一并描述：

$("<div>我是文本节点</div>")

创建为属性节点：

与创建元素节点同样的方式

$("<div id='test' class='aaron'>我是文本节点</div>")

我们通过 jQuery 把上面的代码改造一下，如下代码所示：

var $body = $('body');
$body.on('click', function() {
    //通过 jQuery 生成 div 元素节点
    var div = $("<div class='right'><div class='aaron'>动态创建 DIV 元素节点</div></div>")
    $body.append(div)
})

一条一句就搞定了，跟写 HTML 结构方式是一样的

$("<div class='right'><div class='aaron'>动态创建 DIV 元素节点</div></div>")

这就是 jQuery 创建节点的方式，让我们保留 HTML 的结构书写方式，非常的简单、方便和灵活。

以上关于[jQuery教程]DOM节点的创建方法（四）的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。