How to insert cloned element with in HTML Markup String? - javascript

I am in need of cloning a div and then append it it in another location. The DIV is looks like this.
<div id="clonableContet" class="clonableClass">
<input id="Name" class="clonableInput" type="text"/>
<input id="Age" class="clonableInput" type="text"/>
</div>
<div id="clonedContentHolder"></div>
If i clone clonableContent and append it in clonaedContentHolder, it contains the same ID
as the previous one. I want change the cloned Content div's id attribute dynamically. But i able to add new class name dynamically to the cloned input Elements. I am good with it. I will able to get the values with some class name reference.
But my problem is i want make last cloned content to be visible. Because, all of these div's are tab contents. I am not able to change the clonableContent div's id.
I tried to create a another div dynamically, and put the cloned div within that. Its like this,
var html = "<div id='clonedContent" + count + "'>" + clonedContent + "</div>";
But the output is [Object][Object]. cloned div, becames object within the String.
How shall i insert the clonedContent within a string as another string?
Or, is there any other way to get the same solution.
Thanks in advance.

create the html as such:
var html = $("<div />").attr('id', 'clonedContent'+count).html(clonedContent);
Then you can use html as a jquery object and append to as the last item as such:
html.appendTo('div:last');

The best way I've found to do this is to append the object to an existing jQuery object:
var html = $("<div id='clonedContent" + count + "' />").append(clonedContent);

Non JQuery solution:
var div = document.createElement("div"); //create a new div
div.id="clonedContent" + count; // set the id with your counter
div.appendChild(clonedContent); //add the DOM reference you have
document.getElementById("clonedContentHolder").appendChild( div ); //add the content to div on page

Related

Remove particular dynamic div using jQuery

I am using append to append some input data with div. After some appending, I have data as below :
<div id="holder">
</div>
var data = "<div id=1><input type='text' id='test_1' name='test_1'></div><div id=2><input type='text' id='test_2' name='test_2'></div>"
$("#holder").append(data );
I am appending data using append. Now, I want to remove particular div based on id.
For i.e. if id is 1 then remove this row. <div id=1><input type='text' id='test_1' name='test_1'></div> and like that for all.
I tried $("#holder").remove(), but it will remove all data. I want to remove particular div then what to do ?
yes $("#holder").remove() will remove everything because this is the parent div consisting of all child divs(like div id=1)
Its a bad practice to give as numericals like the way you are doing(id=1,id=2 etc)
Append some alphabets along with number like id=a1,id=a2....
to remove a particular div
try
$("#a1").remove()
from the comments above you have said that you will get the id from click
so try like below
$(selector).click(function(){
var id=//get the id of the div
$("#a"+id).remove()
});
I think this could work:
var theId = document.getElementById("1");
theID.remove();

Inserting variable into array item

I have an array of elements from my webpage which I am trying to then insert some html, stored as a variable into a matching array item. For example
<div class="play">
<div>
<p>Item to be inserted after this p tag</p>
</div>
</div>
var elements = $('.play');
//elements length = 4;
var item = '<p>HTML to be inserted</p>'
$(item).appendTo(elements[1]);
In the above code I am trying to insert 'item' into the second value in the array within the child div shown in the html, however I am unsure how to insert it into the child div. At present this inserts 'item' after the parent html tag containing .play.
Any help would be greatly appreciated.
Note that elements isn't an array, it's a jQuery object, which means you can use jQuery methods to traverse through the DOM:
elements.eq(1).find("div").append(item);
Demo: http://jsfiddle.net/rgQ7g/
.eq(1) selects the second item but returns it wrapped in another jQuery object, so then you can use .find("div") to get to the child div and .append() your item to it.
Try after():
$('.play').find('p').after(item);
This inserts content AFTER a selected element in the DOM. It also does it for all the classes named .play
If you need to specify an index, I recommend a function:
function appendPlay(index, content) {
$('.play').eq(index).find('p').after(content);
}
appendPlay(2, '<p>HTML to be inserted</p>');
jsFiddle
please try using
var element = $('.play div p');
var item = '<p>HTML to be inserted</p>'
$(element).parent().append(item);
Edited
from
var element = $('.play div');
var item = '<p>HTML to be inserted</p>'
$(element).append(item);
Well, I guess this would work:
$(item).appendTo($(elements));
But a better solution would be using:
$('.play').find('p').after(item);
You can use link below. (I edited code after comment)
You should write code like;
var selector = ".play",
text = "<p>HTML to be inserted</p>";
$(selector + " div p").eq(1).after(text);
http://jsbin.com/esesul/5/

create element around empty element

Im trying to get a solution to create a new element and append it around an empty element such like IMG, INPUT's
i could easly just add a parent element around the IMG or INPUT, but i would rather do in via the DOM only.
The only way ive been able to do this so far is using cloneNode and appending it to the newly created element.
Example add a DIV via DOM around the already present IMG
Before:
<input type="text" />
After:
<div><input type="text" /></div>
This is what i have created and works but because it deletes the node the defualt values get wiped i hope there is an simpler way to create and element and append around the INPUT
<input id="ic706" type="text" />
.
var e = document.getElementById("ic706")
var cloned = e.cloneNode(false);
e.parentNode.removeChild(e);
var c = document.createElement("div");
c.id = "container";
document.body.appendChild(c);
document.getElementById("container").appendChild(cloned);
I'd suggest:
function wrapElem(el, wrapWith) {
var newElem = document.createElement(wrapWith);
el.parentNode.insertBefore(newElem, el);
newElem.appendChild(el);
}
wrapElem(document.getElementsByTagName('input')[0], 'div');
JS Fiddle demo.
And seems to preserve event-binding.
This works by creating a new element, inserting it before the element you want to wrap, and then moving the element to wrap into the wrapper, rather than deleting and recreating; so this should preserve any events, and properties, bound to the element.
A rather primitive solution (but simple to follow):
var elem = document.getElementById('test');
elem.outerHTML = '<ul><li>' + elem.outerHTML + '</li></ul>';

jQuery append to dynamicly created child div

I am trying to append text to a div which has been dynamically created. Within this div there are 2 child divs, one for title and one for the body.
This main div is droppable, however I want that when the item is dropped, the text enters into the child div "body".
I currently have the following code which appends the text to the main div.
$($(this)).append(draggableText + '<br>');
The name of the child div is #catPileBoxBody
However there are 3 of these which have been dynamically created. So is there a way of inserting the text into something like:
$($(this."CHILD called #catPileBoxBody")).append(draggableText + '<br>');
Any help would be massively appreciated! I have been stumped on this for AGES!
$(this).find("#catPileBoxBody").append(draggableText + '<br>');
But as you should have only one element with a given ID, you should be able to simply do
$("#catPileBoxBody").append(draggableText + '<br>');
The fact that the divs have been created dynamically changes nothing.
You can append it in the following manner
Edited:
$(this).find('div.yourClass').append(draggableText + '<br>');

Jquery get image HTML

How can I copy the whole <img /> using jquery.
At the moment I am trying: $('img').clone().html()
Usage:
'<div class="content-left">'+$(this).find(".bar .info").html()+$(this).find(".bar img").clone().html()+'</div>';
To create new copies of every image in the DOM you can select them and clone them, then append them to some container.
//store a clone of all the images in the DOM in a variable
var $clone = $('img').clone();
//now add the clones to the DOM
$('#newContainer').html($clone);
Here is a demo: http://jsfiddle.net/jasper/r3RDx/1/
Update
You can create your HTML like this:
//create a new element to add to the DOM
//start by creating a `<div>` element with the `.content-left` class
//then add a string of HTML to this element
//then append a set of DOM elements (clones) to the same parent element (the `<div>`)
var $newElement = $('<div />').addClass('content-left').html($(this).find('.bar .info').html()).append($(this).find('.bar img').clone());
//then you can add the new element(s) to the DOM
$newElement.appendTo('#newContainer');
Here is a demo: http://jsfiddle.net/jasper/r3RDx/2/
jQuery objects are simple arrays containing the html of the selected element. This means that I can simply do: $('img.someclass')[0] to access the html of the first (and probably only) matched element.
clone includes the event handlers of the object. If you want just the html whats below would be fine
$('#someid').html($('img'))

Categories