Insert Div content in Div dynamically By Javascript - javascript

I work with Javascript and Html. I have two <div>
<div id="test1">
</div>
and
<div id="test2">
Hello World
</div>
and I also have button .when click button I want to div test2 insert into div test1
Can anybody help me?

in the click handler
$('#test2').appendTo('#test1')
Demo: Fiddle

Related

Using js to hide a div on click of aherf

I needs to hide a div when the aherf got clicked where I can't use script tag in it . So how can I do it.
<div class="alert">
<p class="alert_message">alert</p><br>
<div><a herf=""class="hide">close</a></div>
</div>
Help me in this....
You can setup the onclick event for the anchor element inline like this.
<div class="alert">
<p class="alert_message">alert</p><br>
<div>close</div>
</div>

Hide previous div onclick

I have the following page structure (super simplified):
I can have X (dynamic) number of idle-variables.
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
My Problem:
When I click save within the second instance of "idle-variable", I want to hide the "var-container" of the previous DIV set. Again, there can be several idle-variable divs at any given time. Anytime the save button is clicked, it should close/hide the "var-container" of the previous div set.
I've tried:
$(".var-container").hide()
$(".var-container").prev().hide();
But they are not working. The first example closes/hides both and the second will close "idle-variable".
Any thoughts here?
Try to do this
$('a').on('click', function() {
$(this).prev().toggle();
});
If you want to hide the content div immediately before the save button when you click on it, use:
$('div.idle-variable a').click(function(){
$(this).prev().hide();
})
jsFiddle example
Consider the HTML:
<div class="idle-variable">
<div class="var-container">content 1</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 2</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 3</div>
Save
</div>
You can hide .var-container div before the link using the jQuery code:
$('a').click(function (e) {
$(this).prev('.var-container').hide();
});
You can test this here.

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!

Copying one hidden div into another div

I am facing a problem while copying One div to another.
The div I am copying has hidden parent div.
Problem is, after copying destination div did not show up even I also changed destination div style display to block but it did not show up. Their IDs are also different.
Source Div:
<div class="row" id="row31" style="display:none">
<div class="column grid_8">
<div id="row3bar1" class="chart" >
<p> Hello World </p>
</div>
</div>
</div>
Destination div:
<div class="row3Model" id="row3modalChart">
</div>
Coping Code:
var row11_updated_html = $('#row3bar1').html();
$('#row3modalChart').html(row11_updated_html);
It works perfectly for me
$('#row3modalChart').html(row11_updated_html);

select disappears with onmouseenter

I want create a menubar. when mouse is over a menu, a div appairs.
<li class="elementoMenu jmenu" tipomenu="jmcerca">
<div class="tleft"></div>
<div class="tabs">
<div class="inner">
FIND
</div>
</div>
<!-- DIV THATH WILL BE APPAIRS IS MOVED HERE-->
<div class="tright"></div>
</li>
The DIV that will be appears is moved where in place of comment via .appendTo jQuery function.
This is the div that appears:
<div id="jmcerca" class="jmenuOpen" style="width:600px;height:500px">
TITLE
<select class="jmenu noProp">
<option>1M</option>
<option>3M</option>
<option>5M</option>
</select>
FIND <input> </input>
<button>GO</button>
</div>
I have binded the event in this way:
$(document).ready(function(){
$('li.jmenu').mouseenter(jMenu.showMenu);
$('li.jmenu').mouseleave(jMenu.leaveTabs);
});
where showMenu and leaveTabs are function that show or hide the div.
It works fine, but when I click on select the option of select and disappears.
Any suggestions?
Thanks

Categories