jQuery学习笔记之创建DOM元素

什么是DOM

DOM (Document Object Model)，文档对象模型，是W3C组织推荐的处理XML和HTML文档的标准编程接口。DOM将HTML或XML文档表示为节点与对象的组合，开发者可以使用JavaScript、VBScript等脚本语言对其进行操作。

在jQuery中，大量使用DOM元素操作，例如：创建、读取、修改、删除等。本文将重点讲解如何使用jQuery创建DOM元素。

创建DOM元素的方法

$(selector).html(content);

使用$(selector)可以获取到需要操作的元素，然后通过 .html()方法改变元素的内容。

let $title = $('<h1>').text('Hello world!');
let $paragraph = $('<p>').text('This is a paragraph.');
$('body').append($title).append($paragraph);

在这个例子中，我们创建了一个<h1>标签和一个<p>标签，并将它们的内容分别设置为Hello world!和This is a paragraph.，然后通过$('body').append()将它们添加到文档中。

我们还可以使用.attr()方法为元素添加属性，例如：

let $img = $('<img>').attr({
  src: 'image.jpg',
  alt: 'Example image'
});
$('body').append($img);

这个例子中，我们创建了一个<img>标签并添加了src和alt两个属性。然后通过$('body').append()将它添加到文档中。

小结

在本文中，我们介绍了如何使用jQuery创建DOM元素，包括创建元素、设置内容和属性等。创建DOM元素是JS和jQuery操作HTML文档的基础之一，好的掌握这些基础知识对于进一步开发复杂交互的页面有着重要的作用。

更多关于jQuery的知识和技术可以参考官方文档。