資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
