4

I am having a very strange issue on the native android browser and blackberry browsers. I simply have a div with id "jobStream" and want to append html to it.

HTML:

<div id="jobStream"></div>

JavaScript"

$("#jobStream").append("<div>test</div>");

Weird thing is that if I do:

$("#jobStream").append("test");

it works fine, but creating the nested div with append seems to be causing issues. I tried with .html() and .after() as well and I see the same problem. I.e. $("#jobStream").html("test") works but $("#jobStream").append("test") does not.

AGAIN: this is ONLY not working on some mobile browsers (native android browser 4.1.1 and blackberry browser from what I have tested).

Any ideas why?

Improve this question
3
  • I don't have the hardware to test it, but can you try assigning the div string to a variable and appending the variable instead? (worth a shot) Commented Dec 31, 2012 at 18:48
  • Have you tried just using document.createElement() Commented Jan 6, 2013 at 18:03
  • I have the same problem :( appending a string is working, but if I try to append() an element, it just doesn't work. And my script is in an external JS file. Any other ideas? Commented Jun 3, 2013 at 15:29

4 Answers 4

Reset to default
3

Ok, time has passed but maybe someone is still trying to figure this one out (like I did until I found an answer).

According to this blog you need to repaint parent block element, in this case you could

$('#jobStream').hide();
$('#jobStream').get(0).offsetHeight;
$('#jobStream').show();

..after the append(), so the newly added elements are repainted.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Worked for me with a div I was trying to prepend() that just wasn't showing up in my Android browser (running my stock browser which is Chrome for Android on my up to date Nexus 4). This is silly and should be fixed.
Maybe it has something to do with performance, not painting elements constantly saves computing power?
You might be onto something in that it could be some kind of performance-related measure that's implemented only on mobile browsers or something like that. But when you're appending a new element it's going to need to be painted at some point!
It didn't fix the problem for me. But if you click the "desktop website" option on the mobile browser this is never an issue. Definitely to do with performance
0

not sure. could be that you're trying to pass an invalid DOM object

maybe try something like;

$("#jobStream").append($("<div>test</div>"));   // <- html string wrapped in $()

or

$('<div/>').html('test').appendTo('#jobStream');
Improve this answer

Comments

0

Have you tried something like this?

$("<div></div>").append($("#test")).html();

or

$("#container").html($("#container").html() + html);
Improve this answer

Comments

0

Turns out that the javascript needed to be contained in an external js file and included rather than coding it inline with . Ridiculous issue but thankfully solved now.

Improve this answer

1 Comment

I'm doing it externally but couldn't get this to work properly :(

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.