DOM Manipulation

1. 创建元素

jQuery

$('<div></div>');

DOM API

// IE 5.5+
document.createElement('div');

2. Inserting Elements Before & After (在前面或者后面插入元素)

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

在 #1 后面插入 div 标签：

<div id="1"></div>
<div id="1.1"></div>
<div id="2"></div>
<div id="3"></div>

jQuery:

$('#1').after('<div id="1.1"></div>');

DOM API

// IE 4+
document.getElementById('1')
    .insertAdjacentHTML('afterend', '<div id="1.1"></div>');

在前面插入呢？

<div id="0.9"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

jQuery

$('#1').before('<div id="0.9"></div>');

DOM API

// IE 4+
document.getElementById('1')
    .insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');

Inserting Elements As Children 插入孩子

Let's say we have this:

<div id="parent">
    <div id="oldChild"></div>
</div>

...and we want to create a new element and make it the first child of the parent (作为第一个孩子), like so:

<div id="parent">
    <div id="newChild"></div>
    <div id="oldChild"></div>
</div>

jQuery

$('#parent').prepend('<div id="newChild"></div>');

DOM API

// IE 4+
document.getElementById('parent')
    .insertAdjacentHTML('afterbegin', '<div id="newChild"></div>

...or create a new element and make it the last child of #parent (使其作为最后一个孩子):

<div id="parent">
    <div id="oldChild"></div>
    <div id="newChild"></div>
</div>

jQuery

$('#parent').append('<div id="newChild"></div>');

DOM API

// IE 4+
document.getElementById('parent')
    .insertAdjacentHTML('beforeend', '<div id="newChild"></div>'

Moving Elements 移动元素

Consider the following markup:

<div id="parent">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>
<div id="orphan"></div>

What if we want to relocate the #orphan as the last child of the #parent? That would give us this:

<div id="parent">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="orphan"></div>
</div>

jQuery

$('#parent').append($('#orphan'));

DOM API

// IE 5.5+
document.getElementById('parent')
    .appendChild(document.getElementById('orphan'));

Simple enough without jQuery. But what if we want to make #orphan the first child of #parent, giving us this:

<div id="parent">
    <div id="orphan"></div>
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

jQuery

$('#parent').prepend($('#orphan'));

DOM API:

// IE 5.5+
document.getElementById('parent')
    .insertBefore(document.getElementById('orphan'), document.getElementById('c1'));

Removing Elements 移除元素

How can we remove an element from the DOM? Let's say we know an element with an ID of 'foobar' exists. Let's kill it!

jQuery

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

DOM API

// IE 5.5+
document.getElementById('foobar').parentNode
    .removeChild(document.getElementById('foobar'));

Adding & Removing CSS Classes 添加/删除 CSS 类

We have a simple element:

<div id="foo"></div>

...let's add a CSS class of "bold" to this element, giving us:

<div id="foo" class="bold"></div>

jQuery

$('#foo').addClass('bold');

DOM API

// All modern browsers, with the exception of IE9
document.getElementById('foo').classList.add('bold');

// All browsers
document.getElementById('foo').className += 'bold';

Let's remove that class now:

jQuery

$('#foo').removeClass('bold');

DOM API

// All modern browsers, with the exception of IE9
document.getElementById('foo').classList.remove('bold');

// All browsers
document.getElementById('foo').className = 
    document.getElementById('foo').className.replace(/^bold$/, '');

Adding/Removing/Changing Attributes 添加/删除/改变 属性

Let's start out with a simple element, like this:

<div id="foo"></div>

Now, let's say this

jQuery

$('#foo').attr('role', 'button');

DOM API

// IE 5.5+
document.getElementById('foo').setAttribute('role', 'button');

In both cases, a new attribute can be created, or an existing attribute can be updated using the same code.

What if the behavior of our <div> changes, and it no longer functions as a button. In fact, it's just a plain 'ole

jQuery

$('#foo').removeAttr('role');

DOM API

// IE 5.5+
document.getElementById('foo').removeAttribute('role');

Adding & Changing Text Content 添加/改变文本

Now, we have the following markup:

<div id="foo">Hi there!</div>

...but we want to update the text to say "Goodbye!".

jQuery

$('#foo').text('Goodbye!');

Note that you can also easily retrieve the current text of the element by calling text with no parameters.

DOM API

// IE 5.5+
document.getElementById('foo').innerHTML = 'Goodbye!';

// IE 5.5+ but NOT Firefox
document.getElementById('foo').innerText = 'GoodBye!';

// IE 9+
document.getElementById('foo').textContent = 'Goodbye!';

Adding/Updating Element Styles 添加/更新元素类型

Generally, adding styles inline or with JavaScript is a "code smell", but it may be needed in some unique instances. For those cases, I'll show you how that can be done with jQuery and the DOM API.

Given a simple element with some text:

<span id="note">Attention!</span>

...we'd like to make it stand out a bit more, so let's make it appear bold.

jQuery

$('#note').css('fontWeight', 'bold');

DOM API

// IE 5.5+
document.getElementById('note').style.fontWeight = 'bold';