使用变量进行Svelte DOM注入

在本文中，我们将学习如何使用变量来存储HTML CSS和JS代码，以便进行DOM注入。DOM（文档对象模型）注入是一种通过该方法可以在无需重新加载页面的情况下修改页面内容的方法，这样可以节省大量加载时间，使我们的Web应用程序更快速和SEO友好。请注意，Svelte不像React.js那样使用虚拟DOM，而是生成整洁的编译后的原生HTML、CSS和JS代码，这使得它与React和其他市场上可用的框架相比更快。

我们也可以像字符串一样将HTML CSS JS存储在变量中。

语法：

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

参数描述：

varname： 我们可以使用符合JavaScript词法语法的任何变量名。

使用方法：

将HTML+CSS+JS内容存储在您选择的变量中。
为了显示内容，使用任何div或其他元素。
在变量名前添加@html，这样Svelte编译器就可以理解它正在处理JSX。

示例1： 在这个示例中，我们将使用一个开关按钮在不同的HTML内容之间切换，我们将使用使用变量的DOM注入概念来构建这个Web应用程序。

首先，我们将创建一个组件名 injection.svelte ，然后将以下代码复制到其中。

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>

现在我们将在App.svelte文件中调用该组件。

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 />

输出：

使用变量进行Svelte DOM注入

现在按下 CTRL+ SHIFT + I 开启开发者工具，如果您正在使用Chrome浏览器。

正如我们可以看到的，只有更改的内容在 DOM中被更新， 整个页面不会重新加载，看看DOM如何在我们通过开关按钮触发事件时自行更新。

使用变量进行Svelte DOM注入

示例 2:

在这个示例中，我们将向组件 injection.svelte 中添加另一个变量，该变量将存储路线图

div>元素 .

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>

输出:

使用变量进行Svelte DOM注入