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.
You can replace
var content = $("#id").html();
with
var content = document.getElementById("id").innerHTML;
and
$("#id").append(element);
with
document.getElementById("id").appendChild(element);
.html(new_html)
can be replaced by .innerHTML=new_html
.html()
can be replaced by .innerHTML
.append()
method has 3 modes:
.append(elem)
can be replaced by .appendChild(elem)
.append(new_html)
can be replaced by .innerHTML+=new_html
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);
You cannot append <script>
tags using innerHTML. You'll have to use appendChild
.
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
.
jQuery offers several other, less straightforward shortcuts such as prependTo/appendTo
after/before
and more.
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);
}
<img>
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.
May 26, 2011 at 9:09
copyHtml
which makes it quite a bit smaller.
May 26, 2011 at 16:46
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.
.html()
and .append()
are jQuery functions, so without using jQuery you'll probably want to look at document.getElementById("yourDiv").innerHTML
innerHTML
from one node to another can lose information. For example, the <input>
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 <script>
tags is exactly handy.
May 26, 2011 at 9:11
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>
foo('bar').html();
instead of$('bar').html();
. Would that help?