How can we convert HTML string to Object using javascript?

Question

I have an Html string like this:

<div id="foo">
    <h1 class="greeting">Hello World!</h1>
</div>

I need to convert this html string to Object in Javascript. i.e., I should get the same object result when used .children() method in jquery.I tried something like this:

a = '<div id="foo">
    <h1 class="greeting">Hello World!</h1>
</div>';
eval("{"+a+"}");
console.log(a);

But it didn't work. What method should I use in javascript to convert HTML string to Object notation. I should get each children node in object form. I do not want to use Jquery in this solution. I am expecting the exact output as shown in console

enter image description here

@A4L Your link does not have the answer what I expected. That page has irrelevant answers — Ganesh Babu, Apr 15 '14 at 13:11
That link __is__ the answer. You have an HTML string that you need converted to a DOM structure. You do not have JSON. — Greg Burghardt, Apr 15 '14 at 13:12
jQuery does not make the HTML element an object as you explained it. No conversion takes place. jQuery creates a custom jQuery object with an array prototype and a custom constructor. It stores the matched element references as HTMLElement objects in it's array object (the same object type returned by getElementById and similar) . jQuery then adds a lot more custom properties to the jQuery object such as `selector, previousObjecty, etc..` In essence if you want to replicate jQuery you would do it similar to `var x = []; x.push(getElementById('foo'))` or similar. — Nope, Apr 15 '14 at 13:36
@FrançoisWahl In Jquery, .children() method converts HTML elements to Object. I got the output in image only by using .children(). Now, I am in a situation not to use Jquery. — Ganesh Babu, Apr 15 '14 at 13:38
@Ganesh: `$('..').children()` gives you a jQuery array with the children inside of it. Those children are still HTMLElements. They have not been converted. `$('..').children()[0]` returns the reference to the actual `HTMLElement` in the jQuery array, hence `$('..').children()[0] instanceof HTMLElement` results in `true`. Off course if you do `$('..').children().eq(0)` you get the jQuery wrapped version. You can simulate all that by simply creating your own array and pushing the `HTMLElement` references into it and add any custom helpers to it as well that keep returning you custom object. — Nope, Apr 15 '14 at 13:51

score 3 · Answer 1 · answered Apr 15 '14 at 13:24

3

In image it is a jQuery object which you can create using following code

var a = '<div id="foo">\
    <h1 class="greeting">Hello World!</h1>\
</div>';
var aDom = jQuery(a);
console.log(aDom );

Pure JavaScript: jsfiddle

var e = document.createElement("div");
e.id = "foo";
e.innerHTML = '<h1 class="greeting">Hello World!</h1>';

console.log(e);

answered Apr 15 '14 at 13:24

Anoop

23,044
10
62
76

Thanks, I need to achieve the same result using Javascript. I don't want to use any jquery library – Ganesh Babu Apr 15 '14 at 13:25
@Ganesh but in image it is a jQuery object – Anoop Apr 15 '14 at 13:26
I knew that. I need to get the same object using Javascript. What method should I use instead of .children() to achieve this result. – Ganesh Babu Apr 15 '14 at 13:27
1

+1 Nice and simple. Here I though OP wanted an elaborate wrapper for all that like jQuery without using jQuery. Well done. – Nope Apr 15 '14 at 13:59

score 1 · Answer 2 · answered Apr 15 '14 at 13:14

1

Edited

var a = '<div id="test"></div>';

var htmlObject = document.createElement('div');

htmlObject.innerHTML = a;

htmlObject.getElementById("test") = data;

answered Apr 15 '14 at 13:14

Dmitry Malinovsky

301
2
15

score 0 · Answer 3 · answered Apr 15 '14 at 13:16

0

Do you want like this

<script>
var htmlStrObj = {};
htmlStrObj.container = '<div id="foo"><h1 class="greeting">Hello World!</h1></div>';
console.log(htmlStrObj);
</script>

answered Apr 15 '14 at 13:16

Asik

7,967
4
28
34

How can we convert HTML string to Object using javascript?

3 Answers3