Question

嗨我有一些html内容，当我在浏览器中运行代码时，我想要呈现此HTML。代码如下。

<script>
<div class="wrapper">
  <header class="clearfix">
    <div class="container"> <a id="logo" href="index.html">Login</a>
      <ul class="social-icons">
        <li><a href="#" class="icon flip">Sign Up |</a></li>
        <li><a href="" class="icon">Forget Password</a></li>
      </ul>
    </div>
  </header>
  <section>
    <article class="clearfix" >
      <aside role="complementary" class="shadow">
          <div id="error"></div>
          <form class="c-form" name="login" id="login">
          <input type="text" id="user-name" name="email" value="User Name">
          <input type="text" id="password" name="password" value="Password">

          <input type="submit" class="button green" value="Sign Up">
        </form>
      </aside>
    </article>
  </section>

</div>
</script>

请提前帮助谢谢。

Answer 1

只需给脚本标记一个id，选择该标记并附加其html内容即可。见http://jsfiddle.net/rohhittt/zwMNr/

$(document).ready(function(){
   $('body').append($("#scriptId").html());
});

Answer 2

将完整的HTML作为字符串分配给Javascript变量，并将该变量放在您要放置此snippt的位置

var htmlcode = 您的模板HTML代码

$（＆＃34;＃testDiv＆＃34）。HTML（htmlcode）

Answer 3

我有点晚了，但无论如何，这个想法和我的前任说的一样。将ID参数添加到脚本标记并将类型设置为text / html，而不仅仅是将脚本中的内容“注入”到DOM（请自己使用jQuery）：

<span>Some text</span>  
<div id="injectionArea">
</div>

<script id="scriptContainer" type="text/html">
  <div>SOME CONTENT INSIDE SCRIPT</div>
</script>

$('#injectionArea').html($('#scriptContainer').html());

小提琴http://jsfiddle.net/ypcjG/2/

中的示例

Answer 4

我是这样做的：

在html文档的末尾添加模板化代码
使用jquery获取它并删除id-tag
将其插入您需要的任何地方

第1步：

<body>
    <div id="templateContainer" style="display:none;">
        <div id="templateForYou"><h1>Test</h1></div>
    </div>
</body>

第2步：

//step 2
var template = $('#templateForYou').clone().removeAttr('id');
// step3
$('#someWhereElse').append(template);

如何呈现脚本标记内的html

4 个答案: