Reuse HTML with css

Question

If I want to resuse a part of the HTML along with the associated css, whats the best way to do this?

Answer 1

User a server-side language like PHP to generate the HTML.

Answer 2

You may want to create a sort of template right? you may have to use a server-side language like PHP to do it.

You may need to create some files like: header.php, body.php and footer.php

and an index.php file would work like this:

<?php
     require "header.php";
     require "body.php";
     require "footer.php";
¿>

Answer 3

You can create client side templates such jQuery templates or underscore templates which can reuse your HTML layout.

Here's a over-simplified example of dynamically generated ul which generates a list of customer's firstname given a data object (d):

<script id="MyTemplate" type="text/html">
        <ul>
        <#
            for(var i=0; i < d.length; i++)     
            {      
               var cust = d[i]; 
        #>
                   <li id="Customer_<#= i.toString() #>">
                        <#= cust.FirstName #> 
                   </li>
        <# 
            }
        #>
        </ul>
</script>

Detailed post here: http://weblogs.asp.net/dwahlin/archive/2009/05/03/using-jquery-with-client-side-data-binding-templates.aspx

Answer 4

HTML cannot be "reused".

An HTML structure can be reused, but as HTML informs the relationships between bits of text, and text varies from page to page, the HTML itself cannot be reused.

However: If you write HTML in a fairly consistent manner, and keep your CSS relatively free of special cases and crazy contortions in order to implement visuals (that might not be a good idea in the first place, even), a lot of the time you can simply @import the style sheet.

A good idea for doing this is to separate your CSS into two files; e.g. layout.css and style.css.

layout.css would contain the general layout of the page; ".menu goes to the right", "h3 is 24px bold", "p has a 5em margin on the right" sort of stuff.

style.css would contain the color scheme, the image replacement code as relevant, and generally specific stuff, and start by @importing structure.css.

This way, if you want to reuse the general layout, you can do so quickly and effortlessly without getting a lot of baggage. The SE sites are an example of a kind of site that uses the fundamental aspects of this approach, even if they don't do it exactly that way.

Note: I don't see how this question relates to JavaScript, but I'll try to answer that bit as well:

When you use JavaScript or jQuery; any CSS that applies to elements you are $.clone()ing or similar will also apply to wherever you put it in next.

Answer 5

Clone it with jQuery if you could use it:

$('#parent .child').clone().appendTo('#parent');

Answer 6

Take a look at jQuery's clone.

From the jQuery site:

The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, .clone() is a convenient way to duplicate elements on a page.

Answer 7

View the source of the webpage:

Ctrl+A => Select All

Ctrl+C => Copy

Open a text editor or IDE if you have not already:

Ctrl+V => Paste

Ctrl+S => Save (to a .html extension)

Answer 8

If you're purely using HTML and CSS, that's not possible. If you use some JavaScript or other server-side programming, then you can store the HTML in a variable and echo it back later.