Is there a way to transform a string from JSON into a DOM structure?

Question

The Problem is:

I get the following structure (generated in PHP) sent via JSON as a string.

<article>

<header>  
    <h2><a href="#">url</a></h2>
    <p><time datetime="2009-11-05">05 Nov 2009</time></p>
</header>

<div class="entry"> 
    <p>something</p>
    ... 
</div>

<footer>something</footer>

</article>

I have a list of articles on the site and I need to replace an existing article with the received one. Using jQuery, I would do something like this:

var $victim = $slider.find('article.loading:first'); 
    $fresh = $(basket.shift());

basket.shift() is the received article in the above string form and $victim is the existing one.

Now, normally I would do

$victim.replaceWith($fresh);

It works in good browsers (gecko, webkit) but jQuery has a known bug on using .innerHTML with HTML5 elements, documented here. .replaceWith uses that method internally in the end.

A solution would be to use native Javascript and methods except .innerHTML. Something like this should work:

$victim.parent().get(0).insertBefore($fresh.get(0), $victim.get(0));

And it does, but only in good browsers, again. Something is not ok with the .get(0) approach on the $fresh var.

I've simulated an insertion of a node created locally in the js code and it works in IE:

var dummy = document.createElement('article');
    var dummyChild = document.createElement('header');
        txt = document.createTextNode("crap");
        dummyChild.appendChild(txt);
dummy.appendChild(dummyChild);

$victim.parent().get(0).insertBefore(dummy, $victim.get(0));

So, is there any other way of transforming the string into a DOM subtree? Or any other way to get by the replaceWith problem?

Note: I'm no javascript guru/ninja :)

Ok, after some more reading I think I've found why the .insertBefore doesn't work.

As the jQuery API states (http://api.jquery.com/jQuery/#creating-new-elements), when I pass the <article> as a string, the DOM element is created also via .innerHTML because of its complexity.

Is there a way to force $() in using the native createElement instead? I know it sucks performance-wise, but at least it will get IE working.

I really wouldn't use the new HTML5 elements yet. It's premature: HTML5 isn't even finished yet, never mind the IE problems. The <header> and <footer> elements don't really get you anything much useful in a scripted-page context. — bobince
– bobince, Commented Jan 28, 2010 at 12:17
I'm opposed to this way of thinking :) HTML5 is ready enough for my needs. Sadly, complex situations like this fail in IE (as many other things do). I'm not using only header and footer (on the whole site), by the way :) — GreenDude
– GreenDude, Commented Jan 28, 2010 at 13:17

Doug Neiner · Accepted Answer · 2010-01-30 06:11:14Z

1

You error might actually be occurring earlier than you think. When you wrap the basket.shift() in $() it is actually being added to a hidden div at that point. Have you tried this:

var $victim = $slider.find('article.loading:first'); 
    fresh = basket.shift();

$victim.replaceWith(fresh);

answered Jan 30, 2010 at 6:11

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

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

1 Comment

GreenDude Over a year ago

Yes, the error occurs at the $() function call like I said in the last edit :) Same thing happens if I give a string to replaceWith, it will first process the string and then replace.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

IE causes errors when working with HTML5 elements so try to donwload the script from this page and include it before any other in the head of the document: http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

This should prevent errors caused by HTML5 elements in IE

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 28, 2010 at 12:00

mck89

19.3k17 gold badges93 silver badges111 bronze badges

1 Comment

GreenDude Over a year ago

THe html5 shiv doesn't cover this. It just creates elements in order to enable styling. I use it by the way.

Collectives™ on Stack Overflow

Is there a way to transform a string from JSON into a DOM structure?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related