Skip to content

Instantly share code, notes, and snippets.

@gnestor

gnestor/javascript-extension.ipynb Secret

Last active April 28, 2026 09:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gnestor/f1893e0226ced227e910f11b769adc06 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gnestor/f1893e0226ced227e910f11b769adc06 to your computer and use it in GitHub Desktop.
Download ZIP
Demo notebook for @jupyterlab/javascript-extension: https://github.com/jupyterlab/jupyterlab/pull/4515
Display the source blob
Display the rendered blob
Raw
javascript-extension.ipynb
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@shardator

shardator commented Mar 1, 2021

Copy link
Copy Markdown

Hi. This is great, but how do you refer to a created DOM element? Particularly I'd like to make a simple table sortable, but JupyterLab makes this rocket science.

@gnestor

gnestor commented Mar 1, 2021

Copy link
Copy Markdown
Author

Use CSS selectors:

# cell 1
%%javascript
    element.innerHTML = '<pre id="test">hello</pre>'

# cell 2
%%javascript
    var test = document.querySelector('#test')
    test.textContent = 'hello world'

@shardator

shardator commented Mar 10, 2021

Copy link
Copy Markdown

Thanks!

@sandorspruit

sandorspruit commented Mar 25, 2022

Copy link
Copy Markdown

This is a really nice demo, just what I was looking for, thanks! 👍🏻

@gnestor

gnestor commented Mar 25, 2022

Copy link
Copy Markdown
Author

@sandorspruit You're welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment