1

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?

TheSprinter
  • 1,523
  • 17
  • 30
mrtswtk
  • 11
  • 1
  • 4
  • 2
    Possible duplicate of [Converting HTML string into DOM elements?](https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements) – Muhammad Usman Dec 20 '18 at 12:36

4 Answers4

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)
Rainbow
  • 6,772
  • 3
  • 11
  • 28
1

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

Peoray
  • 1,705
  • 2
  • 12
  • 21
  • I feel like if you expanded this with explanation + pos code snippet as example, it would make for a much better answer :) – treyBake Dec 20 '18 at 12:44
  • 1
    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 – Peoray Dec 20 '18 at 12:48
  • 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 :) – treyBake Dec 20 '18 at 12:49
  • Don't know if this makes enough sense, but I'd like OP to point out what he/she needs exactly: https://jsfiddle.net/3w29rcap/ – Peoray Dec 20 '18 at 12:54
  • 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: And ends with: 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? – mrtswtk Dec 20 '18 at 14:12
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).
zozo
  • 8,230
  • 19
  • 79
  • 134
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.

Ravikumar C Bhambhani
  • 91
  • 1
  • 9