Can you please take a look at this demo and let me know why I am not able to load the #source div into #target div?
<div id="source">
<div class="source-inn"><a>A</a></div>
<div class="source-inn"><p>B</p></div>
<div class="source-inn"><span>C</span></div>
</div>
<div id="target"></div>
<script>
$( "#source" ).load( "#target" );
</script>
There is no need to use .load() here because that is to load data from the server and place the returned HTML into the matched element (doc for .load is here).
I Suggest to use .append() for .children() elements like that :
http://jsfiddle.net/csdtesting/rc9kgekc/
$('#target').append($('#source').children());
The DOM result after that will be:
<div id="source">
<div id="target">
<div class="source-inn"><a>A</a></div>
<div class="source-inn"><p>B</p></div>
<div class="source-inn"><span>C</span></div>
</div>
</div>
BUT, if you want DOM result to be like that:
<div id="target">
<div id="source">
<div class="source-inn"><a>A</a></div>
<div class="source-inn"><p>B</p></div>
<div class="source-inn"><span>C</span></div>
</div>
</div>
Then, you will use it without .children() as bellow:
http://jsfiddle.net/csdtesting/aywww7r7/
$('#target').append($('#source'));
Hope this helps!
You want to append the div to the source like this:
$( "#source" ).append( $("#target") );
note that the css won't apply to the target since the target div doesnt have the same class.
Related
I have some HTML, like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Is there a way using jQuery to insert the plain text Bar directly in between #foo2 and #foo3, so the resultant HTML would be like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
Bar
<div id="foo3">foo3</div>
</div>
I am able to put the text in with a <span> tag using $("<span/>").text("Bar").insertAfter("#foo2"), but is there a way to just put the plain text there, without a <span> around it?
You can use .after:
$('#foo2').after('bar');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Use document.createTextNode("bar"):
$("#foo2").after(document.createTextNode("bar"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In the case you need an alternative with plain JavaScript, you can use insertAdjacentText()
document.getElementById('foo2').insertAdjacentText('afterend', 'bar');
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In case you are interested, the first argument provides other alternatives:
element.insertAdjacentText(position, element);
position
A DOMString representing the position relative to the element; must be one of the following strings:
'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.
element
A DOMString representing the text to be inserted into the tree.
I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();
You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});
You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/
Say I have
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
$('#controller').html().which returns
<div id="first">1</div>
<div id="second">2</div>
How do I get .html() to return
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
Or is there an alternate function for that?
Wrap it (ie. a clone) inside another parent
$('<div></div>').append($('#controller').clone()).html();
Also, check out a similar question.
You need to use outerHTML
Live Demo
$('#controller')[0].outerHTML
You can add your div's clone to dynamically created div and use html of it.
$('<div>').append($('#controller').clone()).html();
I have a few divs within a containing div, eg:
<div id="container">
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
</div>
I want to add a class to the 2nd 'item' div, so I created:
$('#container:eq(1)').find('.item').addClass('newclass');
This isnt working. I have also tried using nth-child() as well, also to no avail.
Can anyone suggest to me a better way of going about this?
May be this is what you want:
$('#container').find('.item').eq(1).addClass('newClass')
Your are missing # for id selector, also need to modify the selector.
Live Demo,
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
try this
$('#container').find('.item').eq(1).addClass('newclass');
First, you target the container separately:
$('#container')
Then fetch its children, limiting it to only the 2nd child:
.children(':eq(1)')
The perform the rest of your search and action:
.find('.item')
.addClass('newclass');
Complete code:
$('#container')
.children(':eq(1)')
.find('.item')
.addClass('newclass');
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
First find the inner element childs and use eq to find the required item and add class to it
I have the following part of DOM:
<div id="content">
<div id="div-1"></div>
<!-- here new DOM -->
<div id="div-2"></div>
</div>
I need to insert new part of DOM between "div-1" and "div-2".
How I can do it with jQuery?
use .after() on div-1
$('#div-1').after('<div id="new">new div</div>');
or use .before() on div-2
$('#div-2').before('<div id="new">new div</div>');
$('#div-1').after('<div>new content</div>')'
or
$('<div>new content</div>').insertAfter($('#div-1'));