49

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 from one div, and move it to another using JS.

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
yeeha1
  • 559
  • 2
  • 5
  • 6
  • 1
    @trusktr - the web application i'm using is loaded with js files that conflicts with jQuery. also, jQuery.noConflict doesn't work. – yeeha1 May 26 '11 at 09:00
  • It may be intimidating at first, but jQuery is written in clear Javascript. Once you understand the main functions, you can grab any portion of the code easily. – Mic May 26 '11 at 09:05
  • You can assign a new identifier for jQuery for example, you can use `foo('bar').html();` instead of `$('bar').html();`. Would that help? – trusktr May 26 '11 at 09:28
  • 1
    Nearly 11k views and only 4 upvotes (and leading answer with 17)? Weird. Would you be happier if OP took out "cannot use jQuery"? – ruffin Nov 03 '15 at 15:38

6 Answers6

68

You can replace

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

with

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

and

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

with

document.getElementById("id").appendChild(element);
Albireo
  • 10,977
  • 13
  • 62
  • 96
37
  • .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.

oriadam
  • 7,747
  • 2
  • 50
  • 48
11

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);
}
Mike Samuel
  • 118,113
  • 30
  • 216
  • 245
  • 2
    You know you can just `clone(true)` the source node? :-) – RobG May 26 '11 at 09:04
  • @RobG, true. And that would probably save quite a few function calls. Then I guess you'd just take the content out of the clone and dump it into the destination? Cloning some nodes like ``s can cause their content to be fetched before they're added to the DOM, but those shouldn't contain child nodes so there shouldn't be corner-cases around extra network requests by doing it your way unless the DOM is just weird. – Mike Samuel May 26 '11 at 09:09
  • @RobG, incorporated the single clone into `copyHtml` which makes it quite a bit smaller. – Mike Samuel May 26 '11 at 16:46
3

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.

jrbedard
  • 3,662
  • 5
  • 30
  • 34
Fennek
  • 197
  • 1
  • 11
2

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

Javascript InnerHTML

Neil Knight
  • 47,437
  • 25
  • 129
  • 188
  • 1
    Copying `innerHTML` from one node to another can lose information. For example, the `` element has both a `value` property in JS and a `defaultValue` property. If they differ, then you lose info by reparsing that you wouldn't by cloning a DOM node. OTOH, sometimes the refusal of `innerHTML` to execute ` – Mike Samuel May 26 '11 at 09:11
1

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>
Billy
  • 15,516
  • 28
  • 70
  • 101