JQuery可以使用一组简单的方法来读取和操作HTML页面的DOM。这些方法是：

• text()
• html()
• val()
• attr()
• removeAttr()
• prepend()
• append()
• before()
• after()
• insertBefore()
• insertAfter()
• wrap()
• replaceWith()
• replaceAll()
• remove()
• empty()
• clone()

这些函数中的每一个都在以下各节中进行介绍。

text()

text()方法可以在给定的HTML元素内读取或者写入文本。这是一个例子：

var text = $('#theElement').text();

$('#theElement').text('New text for element.');

不带参数的text()方法将返回所选HTML元素的文本。在以上示例的第一行中对此进行了说明。

带有字符串参数的text('new text')方法将用给定的新文本替换HTML元素的现有文本。如果我们使用text()元素插入HTML，则HTML将被转义，因此将显示为文本。它不会被格式化为HTML。

html()

html()方法的工作方式与text()方法非常相似，不同之处在于该方法返回给定元素的HTML，而不仅仅是文本。这是一个例子：

var html = $('#theElement').html();

$('#theElement').html('New text for element.');

没有参数的html()方法仅返回所选元素的HTML。元素的主体，即。不包含元素自己的HTML。

带有字符串参数的html('new HTML')方法设置所选元素的HTML。 HTML的格式将与HTML相同。

val()

val()方法用于获取和设置表单字段的值。这是一个例子：

var theValue = $('#theFormField').val();

$('#theFormField').val('New value');

不带参数的val()方法将返回所选表单字段的值。

带有字符串参数的val('new value')方法会将字段的值设置为作为参数传递的字符串。

attr()

" attr()"函数可以读取和写入HTML元素的属性。这是一个简单的示例：

var attrValue = $('#theFormField').attr('height');

$('#theFormField').attr({height : attrValue });

注意，attr()方法如何将JavaScript对象作为参数。此JavaScript对象的字段将解释为要在所选HTML元素上设置的属性。

removeAttr()

removeAttr()方法用于从HTML元素中删除属性。这是一个例子：

$('#theFormField').removeAttr('height');

prepend()

prepend()方法将新的HTML插入所选HTML元素的开头。新的HTML与该元素已经具有的HTML串联在一起。这是一个例子：

$('#theElement').prepend('New HTML...prepended');

append()

append()方法将新的HTML插入所选HTML元素的末尾。新的HTML与该元素已具有的HTML串联在一起。这是一个例子：

$('#theElement').append('New HTML...appended');

before()

" before()"方法将HTML插入到所选元素之前(元素外部)。这是一个例子：

$('#theElement').before('Inserted before');

after()

after()方法将HTML插入到选定元素之后(元素外部)。这是一个例子：

$('#theElement').after('Inserted after');

insertBefore()

insertBefore()方法可以将HTML元素从DOM中的一个位置移动到另一个位置。更准确地说，它将选定的HTML元素移到由传递给insertBefore()的字符串参数选择的元素之前。这是一个例子：

$('#theElement').insertBefore('#anotherElement');

insertAfter()

" insertAfter()"方法可以将HTML元素从DOM中的一个位置移动到另一个位置。更精确地讲，它将选定的HTML元素移动到传递给insertBefore()的字符串参数所选择的元素之后。这是一个例子：

$('#theElement').insertAfter('#anotherElement');

wrap()

wrap()方法可以将选定的HTML元素包装在另一个HTML元素中。这是一个如何使用wrap()的例子：

$('#theElement').wrap('<div style="border: 1px solid black;"></div>');

本示例将所选元素(ID为theElement)包装在给定的div元素中。 div元素是在传递给wrap()方法的字符串参数中定义的。

replaceWith()

replaceWith()方法用一个新的替换HTML元素。新的HTML元素作为参数传递给replaceWith()方法。这是一个例子：

$('#theElement').replaceWith(
    '<div style="border: 1px solid black;"></div>');

这个示例用传递给replaceWith()方法的字符串参数中的div元素替换了选定的HTML元素(ID为'theElement`)。

replaceWith()方法也可以用来替换父元素，但保留其所有内容。这是通过将其与html()方法结合在一起来完成的。这是一个例子：

$('#theElement').replaceWith(
    '<div style="border: 1px solid black;">' +
     $('#theElement').html() +
    '</div>');

请注意，在调用replaceWith()的内部，所选元素内的HTML是如何串联到新元素中的。

replaceAll()

replaceAll()方法的工作方式类似于replaceWith()函数，不同之处在于它的语法有点倒退。最好通过一个示例来说明这是什么意思：

$('<div style="border: 1px solid black;"></div>')
        .replaceAll('#theElement');

这个例子用id $ theElement中的HTML元素替换为在$()方法中定义的HTML元素。

remove()

remove()方法从DOM中删除选定的HTML元素。这是一个例子：

$('#theElement').remove();

empty()

empty()方法删除所选HTML元素的所有子元素。这是一个例子：

$('#theElement').empty();

clone()

clone()方法会克隆所选元素，因此我们可以在DOM中的其他位置插入其副本。这是一个例子：

var clone = $('#theElement').clone();

clone.insertBefore('#anotherElement');

克隆事件处理程序和数据

当像上面的示例一样克隆元素时，默认情况下，元素事件处理程序和数据不会复制到克隆中。只需将值true传递给clone()方法，就可以使它也复制事件处理程序和数据。这是一个例子：

var clone = $('#theElement').clone(true);

clone.insertBefore('#anotherElement');