24:null 25:["$","title",null,{"children":"How To: Create and Update HTML Views | Andrew Wooldridge | Observable"}] 2a:[] 28:{"id":"ba35d6e7dcbb61a5","slug":"how-to-create-and-update-html-views","title":"How To: Create and Update HTML Views","thumbnail":"229b3579e225c88e79166e7a1032abe44057a922f79221c9328185c46fb2752e","access_level":"public","create_time":"$D2021-10-12T18:03:28.373Z","update_time":"$D2021-10-12T19:36:04.838Z","view_time":null,"first_public_time":"$D2021-10-12T19:04:30.135Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":133,"publish_version":133,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"99e6b8beaf232e00","slug":"html-elements","title":"HTML Elements","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"How To: Create and Update HTML Views","cells":[{"id":0,"value":"# How To: Create and Update HTML Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"This notebook gives you a quick taste of how to use HTML in your own notebooks. For a more comprehensive review, check out https://observablehq.com/@observablehq/introduction-to-html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Ways to create HTML views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"There are several ways to make an HTML view","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"output = html`

Like this

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Using the HTML cell type","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Using the **Markdown** cell type","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"{\n let foo = document.createElement(\"div\");\n foo.innerHTML = \"Via native JavaScript\"\n return foo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"## Manipulating HTML Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"A common practice is to create some HTML view for some code to operate on. If you `yield` the HTML it will then be available to manipulate:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n // create a HTML block\n const out = html`

Some HTML:

`\n // then yield it\n yield out;\n // you can then manipulate it\n out.querySelector(\"span\").innerHTML=\"(Added later)\"\n // note out is a local variable here.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"HTML created this way is also reactive when variable names change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"{\n const out=html`The value is ${range}`\n yield out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Move the slider to see the value change in HTML","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"This also works for CSS applying to HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"

Hey, I'm some HTML!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Change the color on the fly with the picker below, you can drag the color swatch to see the color change in real time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"The CSS styles you create effect every HTML cell, and the current page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"When updating HTML, try to leverage Observables reactive framework, instead of poking the DOM:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"### Variable Way","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"added = \"I got added\" // each var it's own cell","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"{\n const out=html`

${added}

`;\n yield out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"### DOM Poke Way","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"{\n const out=html`

`;\n yield out;\n out.querySelector(\"b\").appendChild(html`I got added`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"Why is the first way \"better\"? Because you can look at the code and see the dynamic aspect. In the second case, scripts from all over the page could be poking the DOM for this cell, and you would not know where it came from. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2a","stdlib":"1","titling":"auto"}} 29:"$28:body"