如何將html放在腳本標簽中並使用jquery顯示它

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來完成：

 <!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>

我將腳本標記的內容放在動態創建的div中，此刻它的行為類似於普通的DOM

如何將html放在腳本標簽中並使用jquery顯示它

問題描述

3 個解決方案

解決方案1
0 2017-08-23 10:25:58

解決方案2
0 2017-08-23 10:33:48

解決方案3
0 已采納 2017-08-23 10:55:25

如何將html放在腳本標簽中並使用jquery顯示它

問題描述

3 個解決方案

解決方案1 0 2017-08-23 10:25:58

解決方案2 0 2017-08-23 10:33:48

解決方案3 0 已采納 2017-08-23 10:55:25

解決方案1
0 2017-08-23 10:25:58

解決方案2
0 2017-08-23 10:33:48

解決方案3
0 已采納 2017-08-23 10:55:25