CODEWITHSUNDEEP
javascriptjqueryhtml
user7461846
user7461846

Reputation:

Dynamically add a div and its content

<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

I need to add the following:

<div class='tagsingle' title='delete'>some variable</div>

js

var a = 'lorem';
var obj = "<div class='tagsingle' title='delete'>" + a + "</div>";
obj.appendTo('#tagstore');

Error: obj.appendTo is not a function...

Also tried: 

var obj = document.createElement('div');
obj.className = 'tagsingle';
obj.appendTo('#tagstore');

Error: obj.appendTo is not a function...

Any help?

Upvotes: 0

Views: 928

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

You're mixing jQuery and raw JS. The .appendTo() is a jQuery method and extends the $() Object - while in your case obj is actually a String.

Basic example from http://api.jquery.com/appendto/

$( "<p>Test</p>" ).appendTo( ".inner" );

In jQuery you could use the Object Element constructor like:

$("<div/>", {
  text: "lorem",
  "class": "tagsingle",
  title: "delete",
  appendTo: '#tagstore'
});
<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or if you like:

var text = "lorem";
var HTMLString = '<div class="tagsingle" title="delete">'+ text +'</div>';
$(HTMLString).appendTo('#tagstore') // Notice the wrapping $()

Upvotes: 0

beta programmers
beta programmers

Reputation: 653

Just try append('Content') rather than appendTo().

This should work fine.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65853

Your main issue is that you are calling a JQuery method on a vanilla JavaScript object.

There are many ways to accomplish what you are trying to do:

In JQuery, there is .append(), but you have to call .append() on the object that the new element should be appended to, not the object that you are appending:

var a = 'lorem';
var obj = "<div class='tagsingle' title='delete'>" + a + "</div>";
$("#tagstore").append(obj);

// Or, you can combine the creation of the string and the append:
$("#tagstore").append("<div class='tagsingle' title='delete'>" + a + "</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

And, there is also .appendTo(), but you have to call it on a JQuery object and pass a JQuery object as the object that you are appending to, not just a selector:

var a = 'lorem';
var obj = "<div class='tagsingle' title='delete'>" + a + "</div>";
$(obj).appendTo($('#tagstore'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

To insert a string that contains some HTML, in vanilla JavaScript, it's .innerHTML:

var a = "Lorem";
document.getElementById("tagstore").innerHTML += "<div class='tagsingle' title='delete'>" + a + "</div>";
<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

But, .innerHTML requires building up the string and has security and performance issues. Using the DOM API, you create a new DOM node, configure it and then use .appendChild() to add it to the document:

var a = 'lorem';
var obj = document.createElement("div");
obj.classList.add('tagsingle');
obj.title='delete';
obj.textContent = a;
document.getElementById("tagstore").appendChild(obj);
<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

Upvotes: 3

Paul
Paul

Reputation: 2076

appendTo is part of jQuery and obj needs to be a jQuery element. In your first example it's a string and in your second example it's a (simple vanilla js) Element.

If you want to use jQuery and create a jQuery element, just surround the string by $("...").

var a = 'lorem';
var obj = $("<div class='tagsingle' title='delete'>" + a + "</div>");
obj.appendTo('#tagstore');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16705

Use jQuery to create your object:

$('<div/>').addClass('tagsingle').appendTo('#tagstore');

appendTo is a jQuery method and you are trying to use it on a vanilla JavaScript object.

Upvotes: 0

Related Questions