How to use .outerHTML and have the Dom update

John Doak

unread,

Aug 25, 2020, 9:32:35 PM8/25/20

to jsdom

So, first, let me say I'm doing something slightly weird. I am using JSDom from inside Go Wasm.

I've got it running. It parses my initial doc and I can print out content by using

getElementById().

I can update the document, such as doing an .outerHTML on an element. I can see this change by viewing document.outerHTML .

However, the dom structure doesn't seem to get updated on the outerHTML assignment.

None of the IDs are gettable via getElementById().

I'm guessing that I need to somehow cause jsdoc to reparse after a change?

Appreciate any help.

Sebastian Mayr

unread,

Aug 25, 2020, 10:00:08 PM8/25/20

to js...@googlegroups.com

We should definitely be reparsing the doc[1] when you set outerHTML. You'll need to give a full repro the be able to help you here.

[1]: https://github.com/jsdom/jsdom/blob/63d24a06d04a60279599782dc97899cde59d901d/lib/jsdom/living/nodes/Element-impl.js#L167

--
You received this message because you are subscribed to the Google Groups "jsdom" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsdom+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/63108553-ca1c-4898-92ae-70775efeac2an%40googlegroups.com.

John Doak

unread,

Aug 26, 2020, 12:20:34 AM8/26/20

to js...@googlegroups.com

Thanks Sebastian.

Ok, this will probably be a little more convoluted than you normally see.

https://github.com/johnsiilver/webgear/blob/master/wasm/wasm_exec.js#L130

This is where I initialize the jsdom instances and tie it to my Go environment I will access via https://golang.org/pkg/syscall/js/ . The rest of the code in this .js file is written by the Go language authors as generic bootstrap code.

My tests is here: https://github.com/johnsiilver/webgear/blob/master/wasm/ui_test.go#L113

Which is failing here:

https://github.com/johnsiilver/webgear/blob/master/wasm/ui.go#L132

But probably more relevant is:

https://github.com/johnsiilver/webgear/blob/master/wasm/wasm.go#L104

This starts our little DOM manipulation adventure replacing what I started with in Javascript JSDOM(`...`) and replacing it.

Here are the log lines:

    log.Println("document as it is in Run() before it is set: ", js.Global().Get("document").Get("outerHTML"))
    js.Global().Get("document").Set("outerHTML", buff.String())
    log.Println("document as it us set in Run():\n", js.Global().Get("document").Get("outerHTML"))
    log.Println("hello: ", js.Global().Get("document").Call("getElementById", "hello").Get("outerHTML"))
    log.Println("myDiv: ", js.Global().Get("document").Call("getElementById", "myDiv"))

This outputs:

2020/08/25 21:12:25 wasm.go:104: document as it is in Run() before it is set: <undefined>

2020/08/25 21:12:25 wasm.go:106: document as it us set in Run():

<!DOCTYPE html>

<html>

<head >

</head>

<body >

<li >

Hello

</li>

</ul>

</div>

</body></html>

2020/08/25 21:12:25 wasm.go:107: hello: <div id="hello"></div>

2020/08/25 21:12:25 wasm.go:108: myDiv: <null>

I'm sure that the output on 104 should be https://github.com/johnsiilver/webgear/blob/master/wasm/wasm_exec.js#L133

The output on 106 is correct.

But the output for 107 is saying that I can getElementById("hello"), which shouldn't exist any longer and according to line 104 never did. So jsdom did parse my opening html and is still storing that in the tree. It however is not storing my update.

I'm 110% sure this is my fault, I'm just not sure where its my fault.

Again, thank you so much for having a look at this.

John

You received this message because you are subscribed to a topic in the Google Groups "jsdom" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsdom/z6a6RRP24gI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsdom+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/CAPdx37SKfXysYRWy8Yqaao4vkf1ZJ9m083g5F89FexFjtL%3DBAg%40mail.gmail.com.

--

John Doak
www.obscuredworld.com

Sebastian Mayr

unread,

Aug 27, 2020, 12:24:00 PM8/27/20

to js...@googlegroups.com

Ah, it looks like you're setting document.outerHTML, which is not a valid property of Document. Setting it will just create a property on the object, but it's not interpreted by jsdom (or any browser).

I think you wanna try document.documentElement.outerHTML?

To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/CA%2BnABuGch_jgdpUCV8upYG33dE5P0XT2HDZMEqk3VDZmB8viqw%40mail.gmail.com.

John Doak

unread,

Aug 27, 2020, 12:30:26 PM8/27/20

to js...@googlegroups.com

Hey Sebastian,

Thanks. I came to the same conclusion last night. I decided to skip the tests and start doing practical tests with some example code. I ended up finding the same problem. It's my ignorance of the JS dom (I do everything in my power to avoid JS, hence this little project you see to never use JS again).

Looks like you can't use outerHTML on documentElement if you are writing, you must use innerHTML. Go figure.

Thanks for looking into it. I'll try to go complete the testing in the next day or two. If it all works out, I'll have some sample code for crazy people doing this kind of thing.

Cheers and I appreciate your help!

John

To view this discussion on the web visit https://groups.google.com/d/msgid/jsdom/CAPdx37QY1ZXpP5idfWeHRXqfNVYjwJqzdOmikrnWEZooxycDgA%40mail.gmail.com.