How can we convert HTML string to Object using javascript? [duplicate]

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
– Ganesh Babu, Commented Apr 15, 2014 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
– Greg Burghardt, Commented Apr 15, 2014 at 13:12

Anoop · Accepted Answer · 2014-04-15 13:24:23Z

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, 2014 at 13:24

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

4 Comments

Ganesh Babu Over a year ago

Thanks, I need to achieve the same result using Javascript. I don't want to use any jquery library

Anoop Over a year ago

@Ganesh but in image it is a jQuery object

Ganesh Babu Over a year ago

I knew that. I need to get the same object using Javascript. What method should I use instead of .children() to achieve this result.

Nope Over a year ago

+1 Nice and simple. Here I though OP wanted an elaborate wrapper for all that like jQuery without using jQuery. Well done.

Dmitry Malinovsky · Accepted Answer · 2014-04-15 13:14:03Z

1

Edited

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

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

htmlObject.innerHTML = a;

htmlObject.getElementById("test") = data;

answered Apr 15, 2014 at 13:14

Dmitry Malinovsky

3012 silver badges15 bronze badges

Comments

Asik · Accepted Answer · 2014-04-15 13:16:04Z

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, 2014 at 13:16

Asik

7,9774 gold badges30 silver badges35 bronze badges

Collectives™ on Stack Overflow

How can we convert HTML string to Object using javascript? [duplicate]

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related