How to get HTML data that is stored on JavaScript variable

Question

I have some HTML data stored on JavaScript variable and I want to fetch the data from that variable

I'm trying to get it by getElementById() method. Please also keep it in mind that I have used same id in every div. I know it's not good way but there is some restriction. So I need the data from 2nd Div.

var complexArray = "<div id="
post ">First content<\/div><div id="
post ">Second Content<\/div><div id="
post ">Third Content<\/div>";

var data = document.getElementById('post').innerHTML;
alert(data);

You can't use the same ID in every div, it's invalid and won't work. Use 'Classes' instead to achieve the desired result. — Xander
– Xander, Commented Jun 27, 2019 at 11:04
document.getElementById, unsurprisingly, searches the document, not some random string of HTML. — Quentin
– Quentin, Commented Jun 27, 2019 at 11:05

charlietfl · Accepted Answer · 2019-06-27 11:10:46Z

2

You can't query in the document for something that only exists in a string variable.

Put that html string into a temporary element and query for it within that element

Change the repeating ID's to classes instead since ID's must be unique

var complexArray = '<div class="post">First content<\/div><div class="post">Second Content<\/div><div class="post">Third Content<\/div>';

// create element to insert the html string into
var tempDiv = document.createElement('div');
tempDiv.innerHTML = complexArray;

// query within that element
var posts = tempDiv.querySelectorAll('.post');

var data = posts[1].innerHTML;
console.log(data);

answered Jun 27, 2019 at 11:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Shubham Dixit · Accepted Answer · 2019-06-27 11:23:04Z

0

You can use DOM PARSER.And id should be unique for Every element,as you have use same id for multiple elements,which is wrong.I have change from id to class ,with post id is only for first element

var complexArray = "<div id='post' class='post'>First content<\/div><div class='post'>Second Content<\/div><div class='post'>Third Content<\/div>";

let doc = new DOMParser().parseFromString(complexArray, "text/html");
console.log(doc.getElementById('post').innerHTML); //
/// query selector All for all elements

doc.querySelectorAll('.post').forEach((ele, i) => {
  if (i == 1) {
    console.log(ele.innerHTML)
  }

})

edited Jun 27, 2019 at 11:23

answered Jun 27, 2019 at 11:17

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to get HTML data that is stored on JavaScript variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related