I have got an array which I am looping through. Every time a condition is true, I want to append a copy of the
HTML code below to a container element with some values.
Active1 year, 1 month ago
HTML > +Its content is effectively inert until activated. Essentially, your markup is hidden DOM and does not render. HTML jquery: onclick function to delete dynamic table row is not calling. Why would a school need to install certificates on student laptops? How was it back then in 1984, when the Apple II had color, and the. 1 to 12 of 29 Free School Website Templates Available on the Free CSS site.
Where can I put this HTML to re-use in a smart way?
When the user selects an event, the jQuery load() function is used to load the content of the event just selected (its data-content is used to determine the file content to be loaded). In addition to that, on big devices, the.event-modal is animated to show the event content.
JQuery
Patrick Reck
Patrick ReckPatrick Reck
6,0471010 gold badges4444 silver badges8181 bronze badges
6 Answers
You could decide to make use of a templating engine in your project, such as:
If you don't want to include another library, John Resig offers a jQuery solution, similar to the one below.
Browsers and screen readers ignore unrecognized script types:
Using jQuery, adding rows based on the template would resemble:
Dave Jarvis
21.9k3030 gold badges135135 silver badges262262 bronze badges
Mathijs FlietstraMathijs Flietstra
11.7k33 gold badges3131 silver badges6565 bronze badges
![]()
Old question, but since the question asks 'using jQuery', I thought I'd provide an option that lets you do this without introducing any vendor dependency.
While there are a lot of templating engines out there, many of their features have fallen in to disfavour recently, with iteration (
<% for ), conditionals (<% if ) and transforms (<%= myString | uppercase %> ) seen as microlanguage at best, and anti-patterns at worst. Modern templating practices encourage simply mapping an object to its DOM (or other) representation, e.g. what we see with properties mapped to components in ReactJS (especially stateless components).
One property you can rely on for keeping the HTML for your template next to the rest of your HTML, is by using a non-executing
<script> type , e.g. <script type='text/template'> . For your case:
On document load, read your template and tokenize it using a simple
String#split
School Website Templates Html With Css Jquery Functions
Notice that with our token, you get it in the alternating
[text, property, text, property] format. This lets us nicely map it using an Array#map , with a mapping function:
Where
props could look like { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' } .
Putting it all together assuming you've parsed and loaded your
itemTpl as above, and you have an items array in-scope:
This approach is also only just barely jQuery - you should be able to take the same approach using vanilla javascript with
document.querySelector and .innerHTML .
A question to ask yourself is: do you really want/need to define templates as HTML files? You can always componentize + re-use a template the same way you'd re-use most things you want to repeat: with a function.
In es7-land, using destructuring, template strings, and arrow-functions, you can write downright pretty looking component functions that can be easily loaded using the
$.fn.html method above.
Then you could easily render it, even mapped from an array, like so:
Oh and final note: don't forget to sanitize your properties passed to a template, if they're read from a DB, or someone could pass in HTML (and then run scripts, etc.) from your page.
Josh from QaribouJosh from Qaribou
4,76111 gold badge1616 silver badges2121 bronze badges
Since the accepted answer would represent overloading script method, I would like to suggest another which is, in my opinion, much cleaner and more secure due to XSS risks which come with overloading scripts.
I made a demo to show you how to use it in an action and how to inject one template into another, edit and then add to the document DOM.
example htmlexample js![]()
Browser support should not be an issue but if you want to cover all possibilities you can make an easy check:
To feature detect
<template> , create the DOM element and check that the .content property exists:
Skate 2 iso xbox 360. Full article: https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old
Useful reference:https://developer.mozilla.org/en-US/docs/Web/API/Document/importNodehttp://caniuse.com/#feat=queryselector
DevWLDevWL
7,63544 gold badges5858 silver badges5858 bronze badges
Head First Html With Css Xhtml
Add somewhere in body
then create css
and add to your js
Mateusz NowakMateusz Nowak
2,87022 gold badges1818 silver badges3232 bronze badges
Other alternative: Pure
I use it and it has helped me a lot. An example shown on their website:
HTML
JSON
Result
rnevius
21.7k77 gold badges4141 silver badges6767 bronze badges
alditisalditis
2,87333 gold badges3232 silver badges5656 bronze badges
In order to solve this problem, I recognize two solutions:
Sebastian NeiraSebastian Neira
Not the answer you're looking for? Browse other questions tagged javascriptjqueryjson or ask your own question.Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |