資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究為什麼在使用document.write()編寫時要分割<script>標籤？
在本教程中，我們將學習為什麼在使用document.write()時要分割<script>標籤。
HTML中的script標籤用於在網頁上執行JavaScript程式碼。JavaScript程式必須包含在script標籤中才能執行。JavaScript中有許多方法可以向頁面新增HTML內容，例如document.write()方法。
document.write()方法用於刪除HTML標籤或文件中的所有內容，並將此方法中指定的內容新增到頁面。由於效能下降以及某些情況下出現的錯誤，通常避免使用此方法。有很多替代方法可以使用。
因此，讓我們看看為什麼在使用document.write()編寫時要分割<script>標籤。
使用<script>標籤與document.write()
我們可以在document.write()方法中新增script標籤。但是，新增到此方法後，它並不像預期的那樣工作。為了正確執行，我們必須將script的閉合標籤分成兩部分。
我們知道document.write()方法是JavaScript程式碼，必須新增到HTML頁面的script標籤中。當我們在此方法內新增script標籤時，我們必須使用script的常用閉合標籤來關閉它。但是，JavaScript會認為此閉合標籤是script外部閉合標籤的標籤。透過這種方式，script標籤將完全關閉，之後新增的所有內容都將作為HTML概念而不是JavaScript來處理。這就是為什麼在使用document.write()編寫時必須分割<script>的閉合標籤才能使程式像往常一樣工作。
使用者可以遵循以下語法來使用帶有document.write()方法的script標籤。
語法
<script> document.write( "<script> <Your script here> </scr" + "ipt>"); </script>
遵循上述語法來使用帶有document.write()的script標籤。
示例
在下面的示例中，我們編寫了兩個不同的程式碼容器。首先，我們嘗試在不分割script標籤的情況下執行程式碼。在第二個容器中，我們分割了script標籤的閉合標籤。成功執行後，我們將在網頁上看到標題和單行段落。
<html>
<body>
<h2> Using <i> document.write() method </i> to write a script in script tag </h2>
<h3 id="heading"> </h3>
<p id="para"> </p>
<script>
document.write(
"<script> document.getElementById('heading').innerHTML='Using <i> document.write() method </i> to write a script in script tag '</scr" + "ipt>");
document.write(
"<script>document.getElementById('para').innerHTML='Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque explicabo iure '
</script>");
</script>
</body>
</html>
這不是我們從程式中接受的輸出。我們在第二個document.write()方法中沒有分割script標籤。因此，讓我們嘗試在程式中分割script標籤後再執行。
<html>
<body>
<h2> Using <i> document.write() method </i> to write a script in script tag </h2>
<h3 id="heading"></h3>
<p id="para"></p>
<script>
document.write(
"<script> document.getElementById('heading').innerHTML='Using <i> document.write() method </i> to write a script in script tag '</scr" + "ipt>");
document.write(
"<script>document.getElementById('para').innerHTML='Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque explicabo iure '</scr" + "ipt>");
</script>
</body>
</html>
您可以看到上面得到的輸出完全是我們接受的。我們分割了document.write()中的script閉合標籤以獲得準確的輸出。
在上面的示例中，使用者可以看到，為了在document.write()方法中執行script標籤，我們必須分割script標籤的閉合標籤。
使用script的另一種方法
使用document.write()並非最佳實踐。它有一些缺點，最好儘量避免。此方法還會降低應用程式的效能。
我們可以使用JavaScript DOM屬性作為document.write()方法的替代方法來編寫指令碼。這可以透過建立一個指令碼元素並將其新增到文件元素（透過在其中新增指令碼）來實現。這是執行此任務最有效的方法的最佳實踐。
使用者可以遵循以下語法將指令碼附加到文件。
語法
<script>
var div = document.getElementById( <Enter id here> );
var script = document.createElement("script");
script.innerHTML = " <Enter script content here> ";
div.appendChild(script);
</script>
遵循上述語法將指令碼新增到HTML文件。
示例
在下面的示例中，我們使用createElement方法在JavaScript中建立了一個script元素。然後，我們使用innerHTML屬性向其中添加了指令碼。此元素已新增到文件主體。我們將從使用者那裡獲取數字輸入。並將查詢立方的指令碼新增到附加到文件主體的script元素中。
<html>
<head>
<style>
body {
text-align: center;
}
#div {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h2> Using <i> createElement method </i> to append scripts to a document </h2>
<label for="number"> Enter a number: </label>
<input type="number" value="0" id="number" name="Number" />
<div id="div"> </div>
<script>
var element = document.createElement("script");
element.innerHTML = "document.getElementById('number').addEventListener('change', function func(){var value=document.getElementById('number').value; value3=value*value*value; ;document.getElementById('div').innerHTML = 'Cube of the above number: ' + value3} )"
document.body.appendChild(element);
</script>
</body>
</html>
在上面的示例中，使用者可以看到我們使用了createElement方法來建立一個指令碼並將其附加到文件的主體。
在本教程中，我們學習了為什麼在使用document.write()時要分割<script>標籤以及建立指令碼的另一種方法。
1K+ 次瀏覽
