How to get element from HTML stored in variable

Question

I am running an API to retrieve email from external system. I managed to get HTML code from the returned JSON and store it in a variable. Now, I would like to run some further operations on this HTML - for example get all elements with [data-type="whatever"].
It would be easy in html document:

var x = document.querySelectorAll('[data-type="whatever"]');

However the HTML document I want to work with is stored in the variable so the code I write in API does not recognise it as a document. How can I do it? Any suggestions with vanilla JS?

Possible duplicate of Converting HTML string into DOM elements? — Muhammad Usman
– Muhammad Usman, Commented Dec 20, 2018 at 12:36

user7148391 · Accepted Answer · 2018-12-20 12:42:20Z

4

You can try something like this.

let rawDoc = '<html><head><title>Working with elements</title></head><body><div id="div1">The text above has been created dynamically.</div></body></html>'

let doc = document.createElement('html');
doc.innerHTML = rawDoc;
let div1 = doc.querySelector('#div1');
console.log(div1)

answered Dec 20, 2018 at 12:42

user7148391

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

Comments

Peoray · Accepted Answer · 2018-12-20 12:39:39Z

1

What if you use innerHTML? or maybe I don't fully understand the question.

answered Dec 20, 2018 at 12:39

Peoray

1,9353 gold badges15 silver badges24 bronze badges

5 Comments

treyBake Over a year ago

I feel like if you expanded this with explanation + pos code snippet as example, it would make for a much better answer :)

Peoray Over a year ago

I thought so too, but the OP didn't give any useful code snippets, hence I don't know how to exactly give a useful example without going out of context

treyBake Over a year ago

You just need to provide vanilla JS code - not a copy/paste solution - the answer is the same based on principle :) but I like your hesitance! Tis better to wait until you're 100% certain :)

Peoray Over a year ago

Don't know if this makes enough sense, but I'd like OP to point out what he/she needs exactly: jsfiddle.net/3w29rcap

mrtswtk Over a year ago

I run API in postman and to retrieve email's html I do the following: var jsonData = JSON.parse(responseBody); var emailHtml = jsonData.views.html.content; Email's HTML is stored in emailHtml variable and typeof is a string. It starts with: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd"> <html> And ends with: </html> Is it possible to convert it into the document that if I use: var x = document.querySelectorAll('[data-type="whatever"]') console.log(x); Postman console outputs all elements with this query selector?

zozo · Accepted Answer · 2018-12-20 13:41:09Z

0

Since you are working without a document you have 2 options.

1. Use regex to get what you need (something like /<.+>.+ data-type="whatever".+<\/.+>/gi) should do (but for an exact match you may need to make something better).


2. Insert the html in a hidden part of the dom and select what you need from it (like in Zohir answer - he provided a good example).

answered Dec 20, 2018 at 13:41

zozo

8,64019 gold badges83 silver badges142 bronze badges

Comments

Ravikumar C Bhambhani · Accepted Answer · 2018-12-21 07:05:53Z

0

I used following code with angular to store whole html content in a variable and pass it as argument to call API.

var htmlBody = $('<div/>').append($('#htmlBody').clone()).html();

This might work for you as i was working on sending email to pass invoice template so try this.

answered Dec 21, 2018 at 7:05

Ravikumar C Bhambhani

1011 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to get element from HTML stored in variable

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related