Question

请可以在脚本标记内加载一些HTML元素，并使用类名

访问其中任何一个

<script id="scripttags">
    <div class="item-1">Hello</div>
    <div class="item-2">Hello2</div>
    <div class="item-3">Hello</div>
</script>

访问它：

<script>
    var loadit = $('script#scripttags item-2').clone();
    alert(loadit);
<script>

无论如何我能做到吗？

Answer 1

使用handlebars.js创建模板。编译后将其绑定到json数据。然后，您可以显示HTML。您还可以使用其他模板库，如mustache.js，underscore.js模板等。

以下代码来自 http://handlebarsjs.com

<script id="entry-template" type="text/x-handlebars-template"> 
<div class="entry"> 
<h1>{{title}}</h1>
 <div class="body">
 {{body}} 
</div> 
</div> 
</script>

这定义了模板。然后，您可以使用它，如下所示。

   <script type="text/javascript">
    var source = $("#entry-template").html(); 
    var template = Handlebars.compile(source);
    var context = {title: "My New Post", body: "This is my first post!"}; 
    var html = template(context);
    </script>

Answer 2

你可以这样做：

$("body").html(
   '<div class="item-1">
     Hello
    </div>

    <div class="item-2">
    Hello2
    </div>

    <div class="item-3">
    Hello3
    </div>'
  );

在body中，可以添加/分配/附加所需的分数。

Answer 3

我建议使用把手，但也可以使用纯js / jquery来完成：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
    <script id="scripttags" type="text/html">
        <div class="item-1">Hello</div>
        <div class="item-2">Hello2</div>
        <div class="item-3">Hello</div>
    </script>
    <script type="text/javascript">
        var el = $( '<div></div>' );
        el.html($('#scripttags').text());
        var loadit = el.find('.item-2').html();
        alert(loadit);
</script>
</body>
</html>

＆＃13;

我将脚本标记的内容放在动态创建的div中，此时它的行为与普通DOM一样

如何将html放在脚本标记内并使用jquery显示它

3 个答案: