脚本可以通过 innerHTML 插入吗?
在本教程中，我们将学习如何使用 innerHTML 插入脚本。
JavaScript 中有各种属性可用于处理当前页面的 HTML。JavaScript 中的 innerHTML 属性用于将 HTML 添加到元素。它还会返回元素中的内容。
脚本是 JavaScript 的程序或代码，用于使网页具有交互性和动态性。我们可以在同一页面的 script 标签中添加脚本，也可以在链接到 HTML 文件的其他 JavaScript 页面中添加脚本。
HTML 可以通过元素的 innerHTML 属性插入。但是，脚本不能插入到 innerHTML 属性中。如果插入到 innerHTML 中，它既不会显示在页面上，也不会被执行。 innerHTML 中的脚本不会在网页上执行任何操作。
那么，让我们看看如何通过 innerHTML 插入脚本以及如何添加要执行的脚本。
使用 innerHTML 插入脚本
innerHTML 用于将 HTML 元素的内容替换为添加到其中的 HTML 内容。它仅用于 HTML 内容，无法执行具有此属性的脚本。在 innerHTML 中添加的脚本在屏幕上也不可见。
我们不能使用元素的 innerHTML 来编写脚本。但是，我们可以通过使用 createElement 方法创建名为 script 的元素，将脚本添加到元素中。我们必须使用 innerHTML 在元素中添加脚本，然后将其附加回需要添加脚本的元素。这样，我们必须先将脚本添加到 script 元素中，然后再通过将其附加到 HTML 元素来添加。
我们按照以下语法使用 innerHTML 插入脚本。
语法
//使用 innerHTML 添加脚本的错误方法
var element = document.getElementById("<enter id here>");
element.innerhtml= "<script> 您的脚本在此处 </script>";
//使用 innerHTML 添加脚本的正确方法
var script= document.createElement("script");
script.innerhtml="<script> 您的脚本在此处 </script>";
element.appendChild( script );
我们按照上述语法检查是否可以通过 innerHTML 插入脚本。
示例
在下面的示例中，我们需要显示用户在输入字段中输入的数字的平方。我们将脚本添加到元素的 innerHTML 属性中。但这样执行脚本并不是此属性的行为。该脚本变得毫无用处，因为它既不会执行也不会显示在屏幕上。因此，我们使用 createElement 属性创建了一个脚本元素，并使用 innerHTML 在其中添加了一个脚本。最后，我们将此脚本元素附加到 HTML 元素中的一个元素中。
<html> <body> <h2> Using the <i> innerHTML property </i> to insert a script </h2> <label> Enter a number: </label> <input type = "number" id = "number" name = "Number" value = "0" /> <br> <button id = "btn" onclick = "func()"> Submit </button> <div id = "div"> </div> <script> function func() { //Trying to add a script using innerHTML that will not execute var div = document.getElementById("div"); div.innerHTML = '<script> var 1 = document.getElementById('123').value; var square = value * value; document.getElementById('div').innerHTML ='Square of the number: ' + xyz; <\/script>'; //Adding a script using innerHTML that will execute var script = document.createElement("script"); script.innerHTML = "var value = document.getElementById('number').value; var square = value * value; document.getElementById('div').innerHTML ='Square of the number: ' + square;"; div.appendChild(script); div.style.color = "red"; } </script> </body> </html>
在示例中，用户可以看到，要使用 innerHTML 属性执行脚本，必须通过 script 元素添加脚本。
使用 eval() 方法和 innerHTML 插入脚本
eval() 方法是 JavaScript 中的一个方法，它将脚本作为字符串作为参数。它将参数中提供的字符串作为 JavaScript 语句执行，并返回脚本的结果。由于此方法将脚本作为字符串提供，因此我们必须将脚本放在双引号或单引号中。
所有用户都可以按照以下语法使用 eval() 方法和 innerHTML 插入脚本。
语法
var element = document.getElementById("<在此输入 id>");
element.innerhtml= eval("<在此输入您的脚本>");
按照上述语法在 JavaScript 中使用 eval() 方法。
示例
在本例中，我们使用 eval() 方法在 innerHTML 属性中执行脚本。我们将从用户那里获取两个输入，并在点击按钮后在屏幕上显示减法结果。用于减去数字的脚本已添加到 innerHTML 属性的 eval 方法中。
<html> <body> <h2> Using the <i> eval() method </i> to insert a script through innerHTML </h2> <label> First number: </label> <input type = "number" id = "number1" name = "First" value = "0" /> <br> <span>-</span> <br> <label> Second number: </label> <input type = "number" id = "number2" name = "Second" value = "0" /> <br> <button id = "btn"> Substract </button> <div id = "div"> </div> <script> var element = document.getElementById('div'); document.getElementById("btn").addEventListener("click", func); function func() { element.innerHTML = eval("element.style.color = 'red'; var first = document.getElementById('number1').value; var second = document.getElementById('number2').value; var Substract = first - second; element.innerHTML = 'Subtraction of the two numbers is: '+ Substract;"); } </script> </body> </html>
在上面的例子中，用户可以看到我们使用了 eval() 方法在 JavaScript 的 innerHTML 属性中执行字符串。
在本教程中，我们学习了如何使用 innerHTML 插入脚本。
