关于text/html的使用

最新推荐文章于 2022-04-20 12:25:49 发布

djskl

最新推荐文章于 2022-04-20 12:25:49 发布

阅读量3.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/djskl/article/details/30987205

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

包含在<script type="text/html"></script>内的html会被浏览器忽略，但我们还可以通过js/jquery去访问(HTML markup in a <script> element is effectively ignored by the web browser, yet still accessible by Javascript or jQuery using the <script> element’s id attribute.)。

这里“被忽略”不仅仅是不显示，在这个标签内的内容对浏览器来说也是不可见的，除非通过text()/html()去访问。这点跟<div style="dispaly:none"></div>是有区别的，display:none虽然不可见，但其内容对浏览器是可见的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $("#hello").html($("#internal").html());
            console.log($("[name='cnt']"));
        })
    </script>
</head>
<body>
    <div id="hello"></div>
    <div id="internal" style="display:none">
        <div name="cnt">hello</div>
    </div>
</body>
</html>

结果：

n.fn.init[2]

如果用type="text/html"的话：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $("#hello").html($("#internal").html());
            console.log($("#cnt"));
        })
    </script>
</head>
<body>
    <div id="hello"></div>
    <script type="text/html" id="internal">
        <div id="cnt">hello</div>
    </script>
</body>
</html>

结果：