diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-03-25 18:53:20 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-03-25 18:53:20 +0100 |
| commit | 68b04d5c78612ea03d1df0014c107340f817b6d7 (patch) | |
| tree | 9fd43582dde886960d61af3c20b9cf99869b10a3 /Base/home | |
| parent | 632cc53e2c02b05993458115baeb44cf6a0702ec (diff) | |
| download | serenity-68b04d5c78612ea03d1df0014c107340f817b6d7.zip | |
LibWeb: Implement getting and setting element.innerHTML
Getting the innerHTML property will recurse through the subtree inside
the element and serialize it into a string as it goes.
Setting it will parse the set value as an HTML fragment. It will then
remove all current children of the element and replace them with all
the children inside the parsed fragment.
Setting element.innerHTML will currently force a complete rebuild of
the document's layout tree.
This is pretty neat! :^)
Diffstat (limited to 'Base/home')
| -rw-r--r-- | Base/home/anon/www/innerHTML.html | 17 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 18 insertions, 0 deletions
diff --git a/Base/home/anon/www/innerHTML.html b/Base/home/anon/www/innerHTML.html new file mode 100644 index 0000000000..9bd382d497 --- /dev/null +++ b/Base/home/anon/www/innerHTML.html @@ -0,0 +1,17 @@ +<!DOCTYPE> +<html> +<head> +</head> +<body> +<div id=clicky style="background-color: red; color: white; border: 1px solid black;">Click me</div> +<div id="foo">This has <b>some HTML</b> inside it!</div> +<script type="text/javascript"> +function hax() { + var foo = document.getElementById("foo"); + console.log("trying"); + foo.innerHTML = 'But now the HTML has changed!'; +} +document.getElementById("clicky").addEventListener("mousedown", hax); +</script> +</body> +</html> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index 719d910ff4..af8dd8381d 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -23,6 +23,7 @@ h1 { <p>This is a very simple browser built on the LibWeb engine.</p> <p>Some small test pages:</p> <ul> + <li><a href="innerHTML.html">innerHTML property test</a></li> <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li> <li><a href="demo.html">fun demo</a></li> <li><a href="raf.html">requestAnimationFrame test</a></li> |