Geek Answers Handbook

Angularjs jqlite append () and jquery append () act differently with <td>

I am trying to add some elements to a, and I see some other behavior when using inline jqlite vs using jquery. I created a fiddle to demonstrate the difference: http://jsfiddle.net/waylon999/5fyBt/1/

It appears when I do:

element.append('<td>Val 1</td><td>Val 2</td>'); // jqlite

tags are split before the row is inserted. But when I try

 $(element).append('<td>Val 1</td><td>Val 2</td>');

It works as I would expect when the entire arg string in append is added to the tag. I tried a couple of things, including

 angular.element(element).append(....)

but I can’t find a way to make it work. Is there something I don’t understand about how this should work?

Thanks!

+4
source share
2 answers

As far as I can tell, this is a bug in JQLite:

 function JQLite(element) { ... if (isString(element)) { var div = document.createElement('div'); // Read about the NoScope elements here: // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work! div.removeChild(div.firstChild); // remove the superfluous div JQLiteAddNodes(this, div.childNodes); this.remove(); // detach the elements from the temporary DOM div. } else { JQLiteAddNodes(this, element); } }

As you may or may not know, you cannot do this:

 div.innerHTML = '<div></div><td>asdf</td>';

td will be deleted. I assume jQuery does not do the same (maybe they are not related to NoScope?). However, if you want to continue to use only Angular, this works just fine:

 element[0].innerHTML += '<td>Val 1xx</td><td>Val 2yy</td>';

I recommend submitting a question on Angular github.

+4
source

Another solution is as follows:

  var cells = angular.element('<table><tbody><tr>' + '<td>Val 1</td><td>Val 2</td>' + '</tr></tbody></table>').children().children().children(); element.append(cells);

This is ugly, but I think you can wrap it in a utility function.

Probably the best solution is to simply remove this IE insanity line.

http://jsfiddle.net/5fyBt/2/

0
source

More articles:


All Articles