数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究可以使用 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方法创建一个名为元素的脚本并将脚本添加到其中使用innerHTML，然后将其附加回必须添加脚本的元素来向元素添加脚本。通过这种方式，我们必须先将脚本添加到脚本元素，然后通过将其附加到元素来添加到 HTML 元素。
我们遵循以下语法使用innerHTML插入脚本。
语法
//A wrong way to add a script using innerHTML
var element = document.getElementById("<enter id here>");
element.innerhtml= "<script> Your script here </script>";
//A right way to add a script using innerHTML
var script= document.createElement("script");
script.innerhtml="<script> Your script here </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 属性执行脚本，我们必须通过脚本元素添加它。
使用 eval() 方法和 innerHTML 插入脚本
eval()方法是 JavaScript 中的一种方法，它在参数中将脚本作为字符串。它将把参数中提供的字符串作为 JavaScript 语句执行，并返回脚本的结果。我们必须将脚本放在双引号或单引号中，因为此方法将脚本作为字符串提供。
所有用户都可以遵循语法使用 eval() 方法和 innerHTML 插入脚本。
语法
var element = document.getElementById("<enter id here>");
element.innerhtml= eval("<Your script here>");
遵循上述语法在 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 插入脚本。
7K+ 次浏览
