Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Element.appendHTML #2151

Closed
wants to merge 1 commit into from

8 participants

@keeto

A wrapper for insertAdjacentHTML for all browsers that support it (IE4+, FF8+ Chrome, Safari 4+, Opera 7+) with a JS-based fallback for non-supporting browsers.

@ibolmo
Owner

Nice!

You're missing docs and specs, and I'll get around to picking at your code this weekend. Cheers.

@cpojer
Owner

I like.

@fabiomcosta
Collaborator

Just to link this pull request with issue #2038

@arian
Owner

awesome, iLike

@ibolmo ibolmo commented on the diff
Source/Element/Element.js
((4 lines not shown))
+
+// 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}),
@ibolmo Owner
ibolmo added a note

A little bit faster if:

var temp = Element.setProperty(document.createElement('div'), 'html', html);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@ibolmo ibolmo commented on the diff
Source/Element/Element.js
((9 lines not shown))
+ 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){
@ibolmo Owner
ibolmo added a note
if (!fragment){
  return this;
} else {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@arian
Owner

it just needs some docs. @keeto would you like to make 'em, otherwise I could make some docs too.

@assertchris

Bump

@kentaromiura
Collaborator

@arian
Today I updated my test fork here:
https://github.com/kentaromiura/mootools-core/tree/feature-appendHTML-2151
that basically is this pull request in which I added Spec, and keeto wrote some docs,
can you please double check this, thanks.

@arian arian closed this in c23e48d
@gonchuki
Collaborator

Tests from this patch are all red on Firefox for me, I'm getting undefined in 16 of them. Can anyone else confirm? using Firefox 14 and 15 beta here by the way.

@arian
Owner

Thanks, fixed it in 205df1b

@fakedarren fakedarren referenced this pull request
Closed

insertAdjacentHTML #2038

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 2, 2011
  1. @keeto

    * Element.appendHTML.

    keeto authored
This page is out of date. Refresh to see the latest.
Showing with 31 additions and 0 deletions.
  1. +31 −0 Source/Element/Element.js
View
31 Source/Element/Element.js
@@ -730,6 +730,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}),
@ibolmo Owner
ibolmo added a note

A little bit faster if:

var temp = Element.setProperty(document.createElement('div'), 'html', html);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ children = temp.childNodes,
+ fragment = temp.firstChild;
+
+ if (!fragment) return this;
+ if (children.length > 1){
@ibolmo Owner
ibolmo added a note
if (!fragment){
  return this;
} else {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ 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){
Something went wrong with that request. Please try again.