2

When using vanilla JS, here is my typical way of creating an element and rendering it on the page:

var span = document.createElement('span');
    span.className = 'someClass';
    span.innerHTML = 'Lorem ipsum';

document.body.appendChild(span);

With jQuery you can do something like

$('body').append('<span class="someClass">Lorem ipsum</span>')

Is there a more shorthand version available for pure JS?

Tim Blount
  • 35
  • 5
  • 1
    Not really, no. There are obviously ways to do it, but behind the scenes that simple jQuery line has a large amount of code backing it. – Travis J Nov 12 '14 at 22:33
  • @TravisJ: You can make a function with of a small handful of lines of code that lets you create massively complex data structures much more cleanly than jQuery allows. –  Nov 12 '14 at 23:06
  • @squint - Yup, you can definitely create this functionality with some custom functions. However, it isn't built in. There is no native way to do this all at once which is going to be "more shorthand" than the oneliner shown. – Travis J Nov 12 '14 at 23:10
  • @TravisJ: `.insertAdjacentHTML()` is built in. But the point is that you're dissuading people with your comment about jQuery's "large amount of code backing it", when in reality, you can make a single recursive function with a tiny amount of code that'll work really well in all browsers. –  Nov 12 '14 at 23:19
  • 1
    @squint - I think the point of a "large amount of code backing it" is that you take on a lot of extra stuff. jQuery provides a lot of functionality, and if it isn't all useful, then that could potentially be a waste of inclusion. For this specific example, it would be less code behind the scenes to write it yourself than to use jQuery. – Travis J Nov 12 '14 at 23:23
  • 1
    @TravisJ exactly. just looking to replicate this particularly method as the project it's for in extremely small in scope and optimization is key – Tim Blount Nov 12 '14 at 23:28
  • What do you mean by "exactly"? I'm not talking about including jQuery. I'm saying you can create a highly optimized way of creating massively complex structures very easily with a tiny amount of code. jQuery's code base has no relevance. But if all you need this for is a single element, then create a function. The now deleted function that was provided by the answer you accepted was both slow and broken. –  Nov 12 '14 at 23:36

3 Answers3

1

Sure:

document.body.insertAdjacentHTML('beforeend', '<span class="someClass">Lorem ipsum</span>');
Jonathan
  • 8,771
  • 4
  • 41
  • 78
  • 3
    No! Please don't tell people to use `.innerHTML += ...`. It's really really bad! This is a terrible suggestion! You're destroying the entire DOM and rebuilding it, not to mention destroying handlers and other data. –  Nov 12 '14 at 22:33
  • @squint Do you have a better idea how to do what the OP wants? – Barmar Nov 12 '14 at 22:34
  • 1
    @Barmar: `.insertAdjacentHTML()` if HTML *must* be used *(blech)* or just make a function that takes a string for tag name and an object for props. It's hardly worth answering. Making a function is the solution to any question about reducing repetitive code. –  Nov 12 '14 at 22:35
  • +1 because your corrected answer is *much* better. Old Firefox will fail (like FF8 I think), but almost no one uses it. –  Nov 12 '14 at 23:21
0

This may be what you're after (not the nicest):

document.body.appendChild((((t = document.createElement("span")).className="someClass"),t)).innerHTML = "Lorem ipsum";

It assigns a new element to t, sets the className, then passes t to the appendChild method, and finally sets the innerHTML

The following may work too:

document.body.appendChild(t = document.createElement("span"),t.innerHTML="yea",t.style.backgroundColor="#F00",t)
Isaac
  • 11,409
  • 5
  • 33
  • 45
-2

An approach I end up using fairly often is:

var el = '<div class="class-name">content</div>';
document.body.innerHTML = el;

But bare in mind, in this example, the entire <body> html is getting replaced. It kinda only works when you target a more specific container like

document.getElementById('container').innerHTML = el;

EDIT Found this queston that talks about the same issue in more length. Here's another that looks to be a duplicate of this, with an answer similar to mine.

Though I'd disregard both of those because @Jonathon's answer looks great.

Community
  • 1
  • 1
elzi
  • 5,442
  • 7
  • 37
  • 61
  • 1
    first way actually works perfect for me (when targeting a container like you said). prototype method looks neat as well! – Tim Blount Nov 12 '14 at 22:51
  • 1
    You're recreating a method that already exists, except yours will fail in some browsers. Also, the `for` loop will fail in all browsers when there's more than one child node. –  Nov 12 '14 at 22:59