Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'feature-appendHTML-2151' fixes #2151

  • Loading branch information...
commit c23e48d2b5891bc80e21c6726a4721b982205d0b 2 parents 34ecf75 + 6f52e2c
@arian arian authored
View
47 Docs/Element/Element.md
@@ -728,6 +728,52 @@ Works like [Element:grab](#Element:grab), but replaces the element in its place,
<div id="child"></div>
</div>
+Element Method: appendHTML {#Element:appendHTML}
+------------------------------------------------
+
+Works like [Element:grab](#Element:grab), but instead of accepting an id or an element, it only accepts an HTML string.
+The HTML string will be parsed to create new DOM elements, and then injected relative to the element from where the method
+was called.
+
+### Syntax:
+
+ myElement.appendHTML(html[, where]);
+
+### Arguments:
+
+1. html - (*string*) The HTML string to append.
+1. where - (*string*, optional: default 'bottom') The position to inject the text to. Values accepted are 'top', 'bottom', 'before' and 'after'.
+
+### Returns:
+
+* (*element*) The current Element instance.
+
+### Examples:
+
+##### HTML
+
+ <div id="myElement">Hey.</div>
+
+##### JavaScript
+
+ $('myElement').appendHTML(' <strong>Howdy.</strong>');
+
+##### Resulting HTML
+
+ <div id="myElement">Hey. <strong>Howdy.</strong></div>
+
+### Notes:
+
+- This method does *not* use the `innerHTML` property of an element but instead creates elements
+directly before injecting them. Thus, it is safe to use in cases where you don't want to destroy
+any descendant elements already present in the parent.
+- This method uses `insertAdjacentHTML` when available.
+
+### See Also:
+
+- [MDC Element:insertAdjacentHTML][].
+
+
Element Method: appendText {#Element:appendText}
------------------------------------------------
@@ -2090,3 +2136,4 @@ This method has been deprecated. Use [Elements:append][] instead.
[MDC Element:removeChild]: https://developer.mozilla.org/En/DOM/Node.removeChild
[MDC Element:replaceChild]: https://developer.mozilla.org/En/DOM/Node.replaceChild
+[MDC Element:insertAdjacentHTML]: https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML
View
31 Source/Element/Element.js
@@ -789,6 +789,37 @@ Element.implement({
});
+
+// appendHTML
+
+var appendInserters = {
+ before: 'beforeBegin',
+ after: 'afterEnd',
+ bottom: 'beforeEnd',
+ top: 'afterBegin',
+ inside: 'beforeEnd'
+};
+
+Element.implement('appendHTML', ('insertAdjacentHTML' in document.createElement('div')) ? function(html, where){
+ this.insertAdjacentHTML(appendInserters[where || 'bottom'], html);
+ return this;
+} : function(html, where){
+ var temp = new Element('div', {html: html}),
+ children = temp.childNodes,
+ fragment = temp.firstChild;
+
+ if (!fragment) return this;
+ if (children.length > 1){
+ fragment = document.createDocumentFragment();
+ for (var i = 0, l = children.length; i < l; i++){
+ fragment.appendChild(children[i]);
+ }
+ }
+
+ inserters[where || 'bottom'](fragment, this);
+ return this;
+});
+
var collected = {}, storage = {};
var get = function(uid){
View
105 Specs/1.4client/Element/Element.appendHTML.js
@@ -0,0 +1,105 @@
+/*
+---
+name: Element.appendHTML Specs
+description: test for appendHTML feature
+requires: [Core/Element]
+provides: [Element.appendHTML.Specs]
+...
+*/
+
+describe('Element.appendHTML', function(){
+
+ var check, base, baseFallBack;
+
+ beforeEach(function(){
+ check = new Element('span', {
+ html: '<div>content</div><div>content</div>',
+ styles: {
+ display: 'none'
+ }
+ });
+
+ check.inject(document.documentElement);
+ base = $(check.getChildren()[0]);
+ baseFallBack = $(check.getChildren()[1]);
+
+ base.set('rel', '0');
+ baseFallBack.set('rel', '1');
+ });
+
+ afterEach(function(){
+ baseFallBack = baseFallBack.destroy();
+ base = base.destroy();
+ check = check.destroy();
+ });
+
+ it('should insert element before', function(){
+
+ base.appendHTML('<span>HI!</span>', 'before');
+ baseFallBack.appendHTML('<span>HI!</span>', 'before');
+
+ var children = check.getElements('span');
+
+ expect(children.length).toBe(2);
+ children.each(function(child, i){
+ expect(child.innerText).toBe('HI!');
+ expect(child.nextSibling.getAttribute('rel')).toBe('' + i);
+ });
+ });
+
+ it('should insert element after', function(){
+ base.appendHTML('<span>HI!</span>', 'after');
+ baseFallBack.appendHTML('<span>HI!</span>', 'after');
+
+ var children = check.getElements('span');
+
+ expect(children.length).toBe(2);
+ children.each(function(child, i){
+ expect(child.innerText).toBe('HI!');
+ expect(child.previousSibling.getAttribute('rel')).toBe('' + i);
+ });
+ });
+
+ it('should insert element on bottom', function(){
+ base.appendHTML('<span>HI!</span>', 'bottom');
+ baseFallBack.appendHTML('<span>HI!</span>', 'bottom');
+
+ var children = check.getElements('span');
+
+ expect(children.length).toBe(2);
+ expect(children.each(function(child, i){
+ expect(child.innerText).toBe('HI!');
+ expect(child.parentNode.getAttribute('rel')).toBe('' + i);
+ expect(child.parentNode.innerText).toBe('contentHI!');
+ }));
+ });
+
+ it('should insert element on top', function(){
+ base.appendHTML('<span>HI!</span>', 'top');
+ baseFallBack.appendHTML('<span>HI!</span>', 'top');
+
+ var children = check.getElements('span');
+
+ expect(children.length).toBe(2);
+ children.each(function(child, i){
+ expect(child.innerText).toBe('HI!');
+ expect(child.parentNode.getAttribute('rel')).toBe('' + i);
+ expect(child.parentNode.innerText).toBe('HI!content');
+ });
+ });
+
+ it('should insert element on inside (bottom)', function(){
+ base.appendHTML('<span>HI!</span>', 'inside');
+ baseFallBack.appendHTML('<span>HI!</span>', 'inside');
+
+ var children = check.getElements('span');
+
+ expect(children.length).toBe(2);
+ children.each(function(child, i){
+ expect(child.innerText).toBe('HI!');
+ expect(child.parentNode.getAttribute('rel')).toBe('' + i);
+ expect(child.parentNode.innerText).toBe('contentHI!');
+ });
+ });
+
+});
View
1  Specs/Configuration.js
@@ -111,6 +111,7 @@ Configuration.sets = {
'Element/Element.Event',
'Element/Element.Style',
'Element/Element.Delegation',
+ 'Element/Element.appendHTML',
'Fx/Fx.Tween',
'Fx/Fx.Morph'
]
Please sign in to comment.
Something went wrong with that request. Please try again.