Svelte DOM Injection using Variables

Last Updated : 08 Nov, 2022

In this article, we are going to learn how to use variables to store HTML CSS and JS code, which can be used to perform DOM injection. dom (document object model) injection is a method through which we can alter the content of the page without reloading the page this saves a lot of load time and makes our web app faster and SEO friendly. Note svelte does not use virtual dom like React.js instead it produces clean compiled native HTML, CSS, and JS code, which makes it much faster compared to react and other frameworks available in the market.

We can also store HTML CSS JS inside variables just like strings.

Syntax:

let varname = '<p>hello</p>';

Parameter description:

varname: We can use any variable name which follows the lexical grammar of javascript.

Usage:

Store html+css+js content inside the variable of your choice.
In order to display the content use any div or any other element.
Add @html before the variable name so that the svelte compiler can understand it is dealing with JSX

Example 1: In this example, we are going to use a switch button to toggle between different HTML content, we will use the above concept of DOM injection using variables to build this web app.

first, we will create a component name injection.svelte and then copy the following code inside it.

Javascript

<script>
 
    let geek = `<div style='width:500px;height:50px;background-color:yellow;border: 1px solid'><p style='color:green;text-align:center;'>GeeksforGeeks</p></div>`;
 
    let table = ' <style>table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}tr:nth-child(even) { background-color: yellow;}tr:nth-child(odd) { background-color: #7CFC00;}</style></head><body><h2>EMPLOYEE TABLE:</h2><table> <tr> <th>Name</th> <th>Contact</th> <th>Designation</th> </tr> <tr> <td>Mohit saxena</td> <td>999999999</td> <td>Front-end</td> </tr> <tr> <td>anyname</td> <td>9999999999</td> <td>Backend</td> </tr> <tr> <td>anyname</td> <td>9999999999</td> <td>Full-stack</td> </tr> <tr> <td>anyname</td> <td>9879879879</td> <td>Devops</td> </tr> <tr> <td>anyname</td> <td>98798798799</td> <td>Tensorflow</td> </tr> <tr> <td>anyname</td> <td>98798799</td> <td>docker</td> </tr></table>';
    let display = geek;
    function handle() {
        if (display === geek) { display = table; }
        else display = geek;
    }
</script>
 
<div>{@html display}</div>
<button on:click={handle}>
    SWITCH
</button>

Now we are going to call this component inside App.svelte file.

Javascript

<script>
    import Injection from "./injection.svelte";
</script>
<div style="height: 50px;
 width: 1080px;
 background-color:greenyellow" ;>
    DOM INJECTION
</div>
<!-- HERE WE ARE CALLING THE INJECTION COMPONENT INSIDE APP.SVELTE -->
<Injection />

Output:

Now open developer tools by pressing CTRL+ SHIFT + I if u are using the chrome browser.

as we can see only the changed content is updated in the DOM, the whole page does not reload, look how the dom updates itself when we trigger the event through the switch button.

Code-example-2:

In this example, we are going to add another variable to the component injection.svelte which will store roadmap <div> elements.

Javascript

<script>
 
    let geek = `<div style='width:500px;height:50px;background-color:yellow;border: 1px solid'><p style='color:green;text-align:center;'>GeeksforGeeks</p></div>`;
    let geek2 = `
    <div style='width:500px;height:50px;background-color:yellow;border: 1px solid'><p style='color:green;text-align:center;'>FRONTEND-ROADMAP</p></div>
    <br>
    <div style='width:500px;height:50px;background-color:yellow;border: 1px solid'><p style='color:green;text-align:center;'>HTML</p></div>
    <div style='width:500px;height:50px;background-color:yellow;border: 1px solid'><p style='color:green;text-align:center;'>CSS</p></div>
    <div style='width:500px;height:50px;background-color:yellow;border: 1px solid'><p style='color:green;text-align:center;'>JAVASCRIPT</p></div>`;
 
    let display = geek2;
    function handle() {
        if (display === geek) { display = geek2; }
        else display = geek;
    }
</script>
 
<div>{@html display}</div>
<button on:click={handle}>
    SWITCH
</button>