Javascript: get DOM element's outerHTML with value

Question

I observe that outerHTML for an input doesn't seem to reflect updated values/checks in form inputs. Is there a way for me to get outerHTML for an entire page and have the values/checks included?

To illustrate, I have some form inputs:

<input id="a" type="text" />
<input id="b" type="text" value="ham" />

I can change the values of the inputs, but the outerHTML does not change.

document.getElementById('a').value = 'cheese';
document.getElementById('b').value = 'biscuit';
document.getElementById('a').outerHTML // => <input id="a" type="text" />
document.getElementById('b').outerHTML // => <input id="b" type="text" value="ham" />

If I create a new element and add it to the DOM, document.body.outerHTML holds the new element but still none of the updated values:

const c = document.createElement('input');
c.id = 'c';
c.type = 'text';
document.body.appendChild(c);
document.body.outerHTML /* => <body>
<input id="a" type="text">
<input id="b" type="text" value="ham">
<input id="c" type="text"></body> */

use setAttribute instead of setting properties on the element — Andy Ray
– Andy Ray, Commented Mar 11, 2021 at 6:23

Manh Nguyen · Accepted Answer · 2021-03-11 06:26:17Z

1

You need to change attribute of element to change outerHTML. Try this:

console.log(document.getElementById("a"));

document.getElementById("a").setAttribute("value", "new value");

console.log(document.getElementById("a"));

<input id="a" type="text" />
<input id="b" type="text" value="ham" />

answered Mar 11, 2021 at 6:26

Manh Nguyen

5633 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Javascript: get DOM element's outerHTML with value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related