Skip to content

Commit

Permalink
Fix PR #726 adding 'appendTo()' and 'prependTo()'
Browse files Browse the repository at this point in the history
Some improvements was asked by @jugglinmike for the pull request #726 which was intended to fix issue #641 by adding the two functions 'appendTo()' and 'prependTo()'.
This commit is a continuation of #726 and fixes it.

This is a combination of 5 commits:

- Fix incorrect indentation

- Fix the two test description provided

- Extend arguments for '.appendTo()' and '.prependTo()'

    Based on jQuery documentation, these two functions accept also Node and Array as argument.

    As 'a.appendTo(b)' is actually just 'b.append(a)', the function has to convert the target to a Cheerio object as long as it is not one already.

- Add unit tests to '.appendTo()' and '.prependTo()'

    These test case are intended to verify the correct behavior of functions for different arguments accepted according to the jQuery documentation (htmlString, Cheerio object, Node element, selector or Array of elements).

- Update API documentation with '.appendTo()' and '.prependTo()'

Moreover, there is two more changes which are not directly related:

- Fix one incorrect unit test of '.after()' with Node object

- Rename argument 'content' to 'target' in 'insert[After|Before]()' API
  • Loading branch information
Delgan committed Jan 3, 2016
1 parent ce8829d commit b09db31
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 14 deletions.
32 changes: 30 additions & 2 deletions Readme.md
Expand Up @@ -586,6 +586,20 @@ $.html()
// </ul>
```

#### .appendTo( target )
Insert every element in the set of matched elements to the end of the target.

```js
$('<li class="plum">Plum</li>').appendTo('#fruits')
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// <li class="plum">Plum</li>
// </ul>
```

#### .prepend( content, [content, ...] )
Inserts content as the *first* child of each of the selected elements.

Expand All @@ -600,6 +614,20 @@ $.html()
// </ul>
```

#### .prependTo( target )
Insert every element in the set of matched elements to the beginning of the target.

```js
$('<li class="plum">Plum</li>').prependTo('#fruits')
$.html()
//=> <ul id="fruits">
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// </ul>
```

#### .after( content, [content, ...] )
Insert content next to each element in the set of matched elements.

Expand All @@ -614,7 +642,7 @@ $.html()
// </ul>
```

#### .insertAfter( content )
#### .insertAfter( target )
Insert every element in the set of matched elements after the target.

```js
Expand Down Expand Up @@ -642,7 +670,7 @@ $.html()
// </ul>
```

#### .insertBefore( content )
#### .insertBefore( target )
Insert every element in the set of matched elements before the target.

```js
Expand Down
20 changes: 10 additions & 10 deletions lib/api/manipulation.js
Expand Up @@ -103,23 +103,23 @@ var uniqueSplice = function(array, spliceIdx, spliceCount, newElems, parent) {
};

exports.appendTo = function(target) {
if (typeof target === 'string') {
target = this.constructor.call(this.constructor, target, null, this._originalRoot);
}
if (!target.cheerio) {
target = this.constructor.call(this.constructor, target, null, this._originalRoot);
}

target.append(this);
target.append(this);

return this;
return this;
};

exports.prependTo = function(target) {
if (typeof target === 'string') {
target = this.constructor.call(this.constructor, target, null, this._originalRoot);
}
if (!target.cheerio) {
target = this.constructor.call(this.constructor, target, null, this._originalRoot);
}

target.prepend(this);
target.prepend(this);

return this;
return this;
};

exports.append = _insert(function(dom, children, parent) {
Expand Down
46 changes: 44 additions & 2 deletions test/api/manipulation.js
Expand Up @@ -498,20 +498,62 @@ describe('$(...)', function() {

describe('.appendTo', function() {

it('(Node) : should add element as last child', function() {
it('(html) : should add element as last child', function() {
var $plum = $('<li class="plum">Plum</li>').appendTo(fruits);
expect($plum.parent().children().eq(3).hasClass('plum')).to.be.ok();
});

it('($(...)) : should add element as last child', function() {
$('<li class="plum">Plum</li>').appendTo($fruits);
expect($fruits.children().eq(3).hasClass('plum')).to.be.ok();
});

it('(Node) : should add element as last child', function() {
$('<li class="plum">Plum</li>').appendTo($fruits[0]);
expect($fruits.children().eq(3).hasClass('plum')).to.be.ok();
});

it('(selector) : should add element as last child', function() {
$('<li class="plum">Plum</li>').appendTo('#fruits');
expect($fruits.children().eq(3).hasClass('plum')).to.be.ok();
});

it('(Array) : should add element as last child of all elements in the array', function() {
var $multiple = $('<ul><li>Apple</li></ul><ul><li>Orange</li></ul>');
$('<li class="plum">Plum</li>').appendTo($multiple.get());
expect($multiple.first().children().eq(1).hasClass('plum')).to.be.ok();
expect($multiple.last().children().eq(1).hasClass('plum')).to.be.ok();
});
});

describe('.prependTo', function() {

it('(html) : should add element as first child', function() {
var $plum = $('<li class="plum">Plum</li>').prependTo(fruits);
expect($plum.parent().children().eq(0).hasClass('plum')).to.be.ok();
});

it('($(...)) : should add element as first child', function() {
$('<li class="plum">Plum</li>').prependTo($fruits);
expect($fruits.children().eq(0).hasClass('plum')).to.be.ok();
});

it('(Node) : should add node as first child', function() {
$('<li class="plum">Plum</li>').prependTo($fruits[0]);
expect($fruits.children().eq(0).hasClass('plum')).to.be.ok();
});

it('(selector) : should add element as first child', function() {
$('<li class="plum">Plum</li>').prependTo('#fruits');
expect($fruits.children().eq(0).hasClass('plum')).to.be.ok();
});

it('(Array) : should add element as first child of all elements in the array', function() {
var $multiple = $('<ul><li>Apple</li></ul><ul><li>Orange</li></ul>');
$('<li class="plum">Plum</li>').prependTo($multiple.get());
expect($multiple.first().children().eq(0).hasClass('plum')).to.be.ok();
expect($multiple.last().children().eq(0).hasClass('plum')).to.be.ok();
});
});

describe('.after', function() {
Expand Down Expand Up @@ -808,7 +850,7 @@ describe('$(...)', function() {
});

it('(Node) : should add element as previous sibling', function() {
var plum = $('<li class="plum">Plum</li>');
var plum = $('<li class="plum">Plum</li>')[0];
$('.apple').before(plum);
expect($('.apple').prev().hasClass('plum')).to.be.ok();
});
Expand Down

0 comments on commit b09db31

Please sign in to comment.