With tables being viewed as improper, overly-complicated structural markup, it surprises me sometimes how many divs and whatnots are required to achieve certain effects. It’s not efficient for us to create 6 divs for every container we want with rounded corners, when one or two would do for a rectangle. Even two divs can be somewhat complicated for clients unfamiliar with html, and we all know they still want to add pretty content.

jQuery.meshtml will replace or insert-into any element with a block of html (e.g. your complicated container markup). Here’s a quick sample:


var baseHtml = "<div>{$mesh}</div>";
var meshSettings = {base:baseHtml, replace:true};
j('.container-box').meshtml(meshSettings);

With replace set to true, the targeted elements will be replaced. Otherwise it will insert your block of html inside of the target elements.

What makes this more useful than the built in replaceWith, wrap, wrapInner and other methods is that our markup can be much more complicated, and we define exactly where we want the variable(s). By default, the variable name is “mesh”. Notice “{$mesh}” in baseHtml above. We can also define multiple variable names and what elements/content those reference. The keyword for the current element being inspected is “each”. See a more complex example of using meshtml below:

Note that you can use my getNodeHtml function so that you aren’t stuck with moving the innerHTML of the elements around. View the source of the complex example to see how.