DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Create Pre-styled/populated DOM Elements

04.07.2005

| 7604 views |

/*
 * create a new DOM element with (optionally) specified className, CSS and text/html content
 * if text contains any markup, it's used as innerHTML value - else a child text node is attached
 * if there's also a parent node given, the new element will be appended as child node
 */
function createStyledElement(tag, parent, cls, css, txt) {
    var el = document.createElement(tag);
    if(cls) el.className = cls;
    if(css) for(var s in css) el.style[s]=css[s];
    if(txt) {
        if (txt.indexOf('<')!=-1) el.innerHTML=txt;
        else el.appendChild(document.createTextNode(txt));
    }
    if(parent) parent.appendChild(el);
    return el;
}

// usage example...
// 1st define some style params
var style1={
    background: '#def',
    color: '#f00',
    padding: '0.5em',
    border: '1px black dotted'
};

createStyledElement(
  'div',
  document.getElementsByTagName('body').item(0),
  null,
  style1,
  'hello <em>world</em>!'
);

Tags:

Comments

Snippets Manager replied on Thu, 2007/09/13 - 1:56pm

useful, will I be able to use it within selected words in a text? BBV

Steve Clay replied on Fri, 2006/03/24 - 4:45pm

Convenient function! I'd only make the test for HTML more rigorous and escape '<' and '>' so this can be used in a bookmarklet: if (txt.match(/\u003C\S+.*\u003E/)) el.innerHTML = txt;