js和jquery对dom节点的操作(创建/追加)

下面就是关于js和jquery对dom节点的操作的完整攻略，包括节点的创建和追加：

创建节点

使用js创建节点

在js中创建节点通常需要分为三个步骤：创建节点、设置节点属性和将节点添加到文档中。

创建节点

使用document.createElement()可以创建一个新的元素节点。例如，如下代码可以创建一个新的 div 元素节点：

var newDiv = document.createElement('div');

设置节点属性

使用HTMLElement.setAttribute()方法或者设置属性值可以设置元素节点的属性。例如，如下代码可以给上面创建的 div 元素节点添加一个 class 属性：

newDiv.setAttribute('class', 'my-class');

或者直接通过访问HTMLElement的属性来设置：

newDiv.className = 'my-class';

将节点添加到文档中

创建好节点后，通常需要将节点添加到文档中。可以使用HTMLElement.appendChild()方法来将创建好的节点添加到指定的元素节点中，例如将新创建的 div 元素节点添加到 body 里：

document.body.appendChild(newDiv);

使用jQuery创建节点

使用jQuery创建节点比起使用js来说可以更为简洁，只需要使用$()方法和相关的方法链即可。

创建节点

使用$()方法和内部传递的html字符串创建一个新的元素节点。例如，如下代码可以创建一个新的 div 元素节点：

var newDiv = $('<div>');

设置节点属性

使用.attr()方法可以设置元素节点的属性。例如，如下代码可以给上面创建的 div 元素节点添加一个 class 属性：

newDiv.attr('class', 'my-class');

将节点添加到文档中

创建好节点后，可以使用.appendTo()方法来将创建好的节点添加到指定的元素节点中，例如将新创建的 div 元素节点添加到 body 里：

newDiv.appendTo($('body'));

追加节点

使用js追加节点

在js中，可以使用HTMLElement.appendChild()方法将一个元素节点追加到另一个元素节点中。例如，现在有一个div元素节点：

var div = document.createElement('div');

可以再创建一个新的 p 元素节点，并将其追加到 div 元素节点中：

var p = document.createElement('p');
p.innerHTML = 'Hello';
div.appendChild(p);

这样便将 p 元素节点追加到了 div 元素节点中。

使用jQuery追加节点

在jQuery中，可以使用几种方法将一个元素节点追加到另一个元素节点中，包括.append()、.appendTo()、.prepend()和.prependTo()等。

例如，现在有一个div元素节点：

var div = $('<div>');

可以再创建一个新的 p 元素节点，并使用.append()将其追加到 div 元素节点中：

var p = $('<p>').html('Hello');
div.append(p);

也可以使用.appendTo()将 p 元素节点追加到 div 元素节点中：

var p = $('<p>').html('Hello');
p.appendTo(div);

以上就是js和jquery对dom节点的操作(创建/追加)的完整攻略。