How to render html which is within script tag
Question
Hi i have some html content which is within the tag i want to render this html when i run the code in browser. the code is following.
<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>
Please help thanks in advance.
4 answers
solution1
1 ACCPTED 2013-01-11 09:30:26
Simply give the script tag an id, select that tag and append its html content. See here http://jsfiddle.net/rohhittt/zwMNr/
$(document).ready(function(){
$('body').append($("#scriptId").html());
});
solution2
0 2013-01-11 09:34:51
Assign complete HTML as a string to Javascript variable and put that variable where u want to place this snippt
var htmlcode = your template HTML code
$("#testDiv").html(htmlcode)
solution3
0 2013-01-11 09:37:15
I'm a little late, but anyways the idea is same as my predecessor said. Add ID parameter to the script tag and set type to text/html than just "inject" content from script to DOM like so (help yourself with 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());
Example in fiddle http://jsfiddle.net/ypcjG/2/
solution4
0 2013-01-11 09:47:47
I do it this way:
- Add the templated code at the end of your html document
- Get it with jquery and remove the id-tag
- insert it wherever you need it
Step 1:
<body>
<div id="templateContainer" style="display:none;">
<div id="templateForYou"><h1>Test</h1></div>
</div>
</body>
Step 2:
//step 2
var template = $('#templateForYou').clone().removeAttr('id');
// step3
$('#someWhereElse').append(template);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.