Manipulating the DOM with Clojure using Klipse
The Klipse plugin is a client-side code evaluator.
This means that inside a web page, you are not limited to manipulate data, but you can also manipulate the DOM.
In this article we will show 4 approaches for manipulating the DOM with Clojure using Klipse:
- the Klipse container
- a custom DOM element
(require '[reagent.core :as r])
[:div "Hello " [:strong "World!"]]
For a full explanation about using
reagent inside Klipse, have a look at Interactive reagent snippets.
And if you want very cool material about
reagent, read this series of reagegent deep dive and How to use a charting library in Reagent.
2. The Klipse container
Each Klipse snippet is associated with a container - a
DOM element that is just below the Klipse snippet and accessible with
(set! (.-innerHTML js/klipse-container) "<div style='color: blue;'> Hello <b>Container</b>!</div>") ""
(set! (.-innerHTML (js/document.getElementById js/klipse-container-id)) "<div style='color: red;'> Hello <b>Container Id</b>!</div>") ""
The reason, we have the
"" at the end of the snippet is to prevent from the evaluation of the code to be presented in the result box.
3. Html editor type
You can also have a Klipse snippet with
data-editor-type="html": the evaluation of the snippet will be the
innerHTML of the result box.
"Hello <strong>HTML editor</strong>"
4. A custom DOM element
Another thing you can do is to add a DOM element to you page (a
canvas or anything you want) and to manipulate it with your klipse snippet.
In this page we have inserted a
<div id="my-custom-container"> just above the Klipse snippet.
(set! (.-innerHTML (js/document.getElementById "my-custom-container")) "<div style='color: green;'> Hello <b>Custom Container</b>!</div>")
There are a couple of blog posts with lots of creative stuff using this approach: