jQuery append to dynamicly created child div - javascript

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

Related

append and replace content to different elements background-img property

I want to get the first instance of a specific div content, which is an image. And then I want to append this image content to the background property of a second element (to appear as background image content), is this possible with jQuery?
I'd preferably also like it to replace an existing background image content from the second div element if one exists. Then of course if it doesn't exist it would be creating it and populating it with image content of div element 1.
$('.element1').find('img:first').appendTo('.element2');
Assuming your HTML structure looks like:
<div class="element1">
<img />
</div>
<div class="element2">
</div>
What you're looking for is:
var getImageSrc = $('.element1 img').attr('src');
$('.element2').css('background-image', 'url(' + getImageSrc + ')');
I've created a fiddle showing this here.
Hope this helps! :)

Jquery cloned element is replacing himself

I have been getting some issue with cloning element, when I am cloning an element and add it to the DOM it work perfectly but when I am trying to clone a second one its replacing the first added clone, do you know where it could come from ?
var clone_count = 1;
var add_row = $('.modeloRowBlock-hidden').clone(true) // clone my div that is hidden
$('.add-modelo-block').on('click', function() { // binded button to add my div
var current_row = add_row.removeClass('modeloRowBlock-hidden hidden').addClass('modeloRowBlock' + ' ' + clone_count++) ;
$('.modeloRowBlock-hidden').before(current_row);
});
Thanks a lot in advance for your help :).
Jonathan.
EDIT : My bad I made it work, actually cloned that way for another reason, and re integrated it in the .on and it worked.
You clone your row only once.
If you're using before on a single element, it will move the elements.
If an element selected this way is inserted into a single location
elsewhere in the DOM, it will be moved before the target (not cloned):
Read more: http://api.jquery.com/before/

Accessing children of div and appending span

I am accessing my children like this, i am trying to set the span title for the each div container.
$(".div-container").children().each(function(n, i){
console.log("Is it coming" + this.id);
$(this.id).before($('<span />').css('margin-left' , '60px').attr({'class':'progress-title' }).html('Title'));
$(this.id).before($('<span />').attr({'class':'progress-title-after' }).html('25% Usage'));
});
I am getting the corresponding the id's, but the span element is not getting added to my div containers.
this refers to the element, so you don't need to reselect it by ID. Just wrap this in a jQuery object.
$(this).before($('<span />').css('margin-left' , '60px').attr({'class':'progress-title' }).html('Title'));
Why not
$(this).before($('<span />').... // rest of code
instead of concatenating those IDs like
$(this.id).before($('<span />').... // rest of code
Because you're fetching IDs of each children so ultimately you're getting the object itself

TinyMCE custom plugin - Remove / toggle style on second click

I've created a custom style for TinyMCE, which simply wraps some selected content within a div when selected:
ed.focus();
ed.selection.setContent('<div class="sideContent" role="complimentary">' + ed.selection.getContent() + '</div>');
ed.undoManager.add();
However, once this style has been selected, it can't be removed. Is there a way of making it so that when the button is clicked for a second time, the outer divs are removed?
Thanks in advance.

How to insert cloned element with in HTML Markup String?

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

Categories