.html() and .append() without jQuery

To copy HTML from one div to another, just use the DOM.

function copyHtml(source, destination) {
  var clone = source.ownerDocument === destination.ownerDocument
      ? source.cloneNode(true)
      : destination.ownerDocument.importNode(source, true);
  while (clone.firstChild) {
    destination.appendChild(clone.firstChild);
  }
}

For most apps, inSameDocument is always going to be true, so you can probably elide all the parts that function when it is false. If your app has multiple frames in the same domain interacting via JavaScript, you might want to keep it in.

If you want to replace HTML, you can do it by emptying the target and then copying into it:

function replaceHtml(source, destination) {
  while (destination.firstChild) {
    destination.removeChild(destination.firstChild);
  }
  copyHtml(source, destination);
}

• .html(new_html) can be replaced by .innerHTML=new_html
• .html() can be replaced by .innerHTML
• .append() method has 3 modes:
  • Appending a jQuery element, which is irrelevant here.
  • Appending/Moving a dom element.
    .append(elem) can be replaced by .appendChild(elem)
  • Appending an HTML code.
    .append(new_html) can be replaced by .innerHTML+=new_html

Examples

var new_html = '<span class="caps">Moshi</span>';
var new_elem = document.createElement('div');
// .html(new_html)
new_elem.innerHTML = new_html;
// .append(html)
new_elem.innerHTML += ' ' + new_html;
// .append(element)
document.querySelector('body').appendChild(new_elem);

Notes

1. You cannot append <script> tags using innerHTML. You'll have to use appendChild.

2. If your page is strict xhtml, appending a non strict xhtml will trigger a script error that will break the code. In that case you would want to wrap it with try.

3. jQuery offers several other, less straightforward shortcuts such as prependTo/appendTo after/before and more.

You can replace

var content = $("#id").html();

with

var content = document.getElementById("id").innerHTML;

and

$("#id").append(element);

with

document.getElementById("id").appendChild(element);

Few years late to the party but anyway, here's a solution:

document.getElementById('your-element').innerHTML += "your appended text";

This works just fine for appending html to a dom element.