Django app: how to read a bit of HTML in JavaScript - Stack Overflow

admin管理员组

文章数量:1287513

I have a Django app that has a design issue I'd like to fix: a script wants to inject a piece of HTML that contain Django tags.

What we have now works is:

• Save the script as an HTML snippet that is nothing but a script: the first line is <script> and the last line closes that script.
• This script sets a local variable to a hard-coded string containing the HTML to inject.

So the snippet an HTML file that contains nothing but a script, and that script in turn contains the HTML to inject as a hard-coded string. This is confusing to read and prevents our JavaScript and HTML linters from working on this snippet.

Is there a cleaner solution? I want to store the JavaScript in a .js file and, preferably, the HTML to inject in a .html file.

I have tried the following, none of which work, and none which meet all of these goals:

1: Change the HTML snippet to a static JavaScript file, while retaining the hard-coded HTML string inside. This fails, because the Django tags are not replaced (no surprise) and in any case the JavaScript still contains hard-coded HTML.

2: Use the DOM to get at the HTML to inject, as follows:

• Move the script to a static js file.
• Move the HTML to inject to a new HTML snippet, putting it in a hidden containing div with a unique id.
• The script gets the HTML string by using the DOM to get the containing div, and calling innerHTML.
• The script then uses the DOM to remove the containing div (once I have the string), so it won't interfere with other code.

This breaks unit tests. And indeed it seems risky to add unwanted HTML to a page.

I could change the hidden added HTML so that it could not interfere (i.e. pick new names and then modify them in the script) but that seems ugly and error-prone. I could also generate the HTML piece by piece in the JavaScript, but that adds a lot of code.

Any ideas for a cleaner solution? I tried lots of web searching, but suspect I am not asking the question right.

I have a Django app that has a design issue I'd like to fix: a script wants to inject a piece of HTML that contain Django tags.

What we have now works is:

• Save the script as an HTML snippet that is nothing but a script: the first line is <script> and the last line closes that script.
• This script sets a local variable to a hard-coded string containing the HTML to inject.

So the snippet an HTML file that contains nothing but a script, and that script in turn contains the HTML to inject as a hard-coded string. This is confusing to read and prevents our JavaScript and HTML linters from working on this snippet.

Is there a cleaner solution? I want to store the JavaScript in a .js file and, preferably, the HTML to inject in a .html file.

I have tried the following, none of which work, and none which meet all of these goals:

1: Change the HTML snippet to a static JavaScript file, while retaining the hard-coded HTML string inside. This fails, because the Django tags are not replaced (no surprise) and in any case the JavaScript still contains hard-coded HTML.

2: Use the DOM to get at the HTML to inject, as follows:

• Move the script to a static js file.
• Move the HTML to inject to a new HTML snippet, putting it in a hidden containing div with a unique id.
• The script gets the HTML string by using the DOM to get the containing div, and calling innerHTML.
• The script then uses the DOM to remove the containing div (once I have the string), so it won't interfere with other code.

This breaks unit tests. And indeed it seems risky to add unwanted HTML to a page.

I could change the hidden added HTML so that it could not interfere (i.e. pick new names and then modify them in the script) but that seems ugly and error-prone. I could also generate the HTML piece by piece in the JavaScript, but that adds a lot of code.

Any ideas for a cleaner solution? I tried lots of web searching, but suspect I am not asking the question right.

• javascript
• django

Share Improve this question Follow edited Feb 26 at 0:37 Russell Owen asked Feb 25 at 0:41 Russell OwenRussell Owen 44955 silver badges1616 bronze badges 2

• By unit tests do you mean tests you're running using Django's testing suite or using Python's unittest module? That will obviously not run your JavaScript code (JavaScript runs client side, the unittest only tests server side stuff, why do you expect that to work?). Your solution seems fine a small improvement would be using the template element – Abdul Aziz Barkat Commented Feb 25 at 7:15
• Our unit tests primarily use playwright and focus on web interaction. – Russell Owen Commented Feb 25 at 19:00

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I took Abdul Aziz Barkat's excellent advice and changed my containing <div id=...> to a <template id=...> and everything started working. I obtain the html string by getting the innerHTML of the template element, and there's no need to try to remove any elements from the page.

I also changed the html snippet to load the associated static javascript file, so the html that uses the scripts can just import the snippet.

Note: do not set the shadowrootmode property of the <template> for this use case. That broke things for me (regardless of whether I set it to "open" or "closed") and it's not needed.

本文标签： Django app how to read a bit of HTML in JavaScriptStack Overflow