数据结构
网络
关系数据库管理系统(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+ 次浏览
