.html() and .append() without jQuery

Question

Can anyone tell me how can I use these two functions without using jQuery?

I am using a pre coded application that I cannot use jQuery in, and I need to take HTML fr

Answer 1

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.

Answer 2

• .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 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.

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

Answer 3

Code:

<div id="from">sample text</div>
<div id="to"></div>

<script type="text/javascript">
var fromContent = document.getElementById("from").innerHTML;
document.getElementById("to").innerHTML = fromContent;
</script>

Answer 4

You can replace

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

with

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

and

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

with

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

Answer 5

.html() and .append() are jQuery functions, so without using jQuery you'll probably want to look at document.getElementById("yourDiv").innerHTML

Javascript InnerHTML

Answer 6

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);
}