Is it possible to change domparser element to string?

Question

I have some HTML string. Use domparser to update some values, now i need back to HTML string format with updated values... Bcoz document.write accept only string.

Checkout the Sample patch,

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

// now i need to replace current update data entire screen
document.write(parsedHtml)

Thanks,

Gopal.R

*"Bcoz document.write accept only string."* Using `document.write` is almost always poor practice. Why do you think you need to? — T.J. Crowder, Feb 19 '20 at 14:49
@T.J.Crowder i agree, is there any option available let me know, this is payment gateway integrations html coming from api some of element values are encrypted before render i need to decrpyt replace this, it will automatcally take into paytm screen. — R.G.Krish, Feb 19 '20 at 14:52

T.J. Crowder · Accepted Answer · 2020-02-20T09:14:46.807

Bcoz document.write accept only string.

Using document.write is almost always poor practice.

But, if for some reason you really need to, what you get back from parseFromString is a Document object. It has a single documentElement, which you can get the innerHTML or outerHTML of:

document.write(parsedHtml.documentElement.innerHTML);
// or
document.write(parsedHtml.documentElement.outerHTML);

Live Example:

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

// now i need to replace current update data entire screen
document.write(parsedHtml.documentElement.innerHTML);

But, again, probably better to just append to the page, e.g.

document.body.appendChild(parsedHtml.documentElement);

Live Example:

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

document.body.appendChild(parsedHtml.documentElement);

Or loop through it and append its children:

let child = parsedHtml.documentElement.firstChild;
while (child) {
    let next = child.nextSibling;
    document.documentElement.appendChild(child);
    child = next;
}

Live Example:

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

let child = parsedHtml.documentElement.firstChild;
while (child) {
    let next = child.nextSibling;
    document.documentElement.appendChild(child);
    child = next;
}

document.body.appendChild(parsedHtml.documentElement); I have getting this error TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at KYCDemantAcOpenComponent.js:105 — R.G.Krish, Feb 19 '20 at 14:55
@Kitta - That's odd, but see the live example where I use the children instead. That's probably want you want anyway. (Running out the door I'm afraid, hopefully that helps.) — T.J. Crowder, Feb 19 '20 at 15:01
https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer would be another option. — misorude, Feb 19 '20 at 15:06
@T.J.Crowder Thanks buddy. Its working cool. document.write only i have used. — R.G.Krish, Feb 19 '20 at 15:19

Is it possible to change domparser element to string?

1 Answers1