Print text into Jupyter notebook cell from %%html using Javascript

Question

In Jupyter notebook we may use some magic functions shortcuts like so:

%%javascript
element.text('Hi')

This outputs in the current cell as expected. (If I'm not mistaken element here stands for current cell in DOM of jupyter notebook).

'Hi'

Question: Is there a way to do the same with %%html? My naive attempt doesn't work.

%%html
<script>element.text('Hi');</script>

Notice that such construct works just fine.

%%html
<script>alert('Hi');</script>

I'm not that good with jQuery and notebook DOM structure, so some explanation will be welcome. I read a few similar questions, like 16852885 but fail to find the relevant analog.

Kyle · Accepted Answer · 2022-10-29 00:06:14Z

2

As far as I know, the element variable is not directly available in an %%html cell. To have access to the element variable, you first need to create it. It should be the parent of the <script> tag in the %%html cell. An easy way to get the <script> tag is to give it an ID.

If you don't need jquery, you can do the following:

%%html
<script id="unique">
    var element = document.getElementById('unique').parentElement;
    element.innerHTML = "Hi";
</script>

If you want to use jquery, you should load it first:

%%html
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script id="unique2">
    var element = $('#unique2').parent();
    element.text("Hi (jquery)")
</script>

answered Oct 29, 2022 at 0:06

Kyle

3473 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Print text into Jupyter notebook cell from %%html using Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related