i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?
When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/
ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>
The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.
Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});
Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview
Related
I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like
<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});
So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .
Thanks!
From jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s). Basic syntax is:
$(selector).action();
A $ sign to define/access jQuery.
A (selector) to "query (or find)" HTML elements.
A jQuery action() to be performed on the element(s)
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
Juts get the html in the div, something like this:
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
Lets say I have this...
<div class="container" id="continingStuff">
<div class="someClass" id="notLookingForThis" data="dataValue1">
Stuff
</div>
<div class="someClass" id="lookingForThis" data="dataValue2">
Stuff
</div>
</div>
and I want to get the id of the div thats data value is dataValue2, how can I do that with jQuery or Javascript?
You can use Attribute Equals Selector to get element, then you can use attr() method to get id of the element.
Example:
$(document).ready(function() {
var id = $('div[data=“dataValue2”]').attr('id');
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=“container” id=“continingStuff”>
<div class=“someClass” id=“notLookingForThis” data=“dataValue1”>
Stuff
</div>
<div class=“someClass” id=“lookingForThis” data=“dataValue2”>
Stuff
</div>
</div>
Using jQuery, you can use this selector:
var id = $("div[data='dataValue2']").attr('id');
Here's working a code snippet:
var id = $("div[data='dataValue2']").attr('id');
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="continingStuff">
<div class="someClass" id="notLookingForThis" data="dataValue1">
Stuff
</div>
<div class="someClass" id="lookingForThis" data="dataValue2">
Stuff
</div>
</div>
you can use this for your code
var id = $('*[data="dataValue2"]').attr('id');
Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()
I have two divs on my website. They both share the same css properties, but one of them holds 24 other divs. I want all of these 24 divs to be copied into the other div.
This is how it looks like:
<div id="mydiv1">
<div id="div1">
</div>
</div id="div2>
</div>
//and all the way up to div 24.
</div>
<div id="mydiv2">
</div>
I want all of the 24 divs within mydiv1 to be copied into mydiv2 when the page loads.
Thanks in advance
Firstly we are assigning divs into variables (optional)
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
Now just assign mydiv1's content to mydiv2.
secondDivContent.innerHTML = firstDivContent.innerHTML;
DEMO
http://jsfiddle.net/GCn8j/
COMPLETE CODE
<html>
<head>
<script type="text/javascript">
function copyDiv(){
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
</head>
<body onload="copyDiv();">
<div id="mydiv1">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
<div id="mydiv2">
</div>
</body>
</html>
You can use the .ready() event of jquery
jQuery(document).ready(function() {
jQuery('.div1').html(jQuery("#div2").html());
}
Also a working DEMO.
var divs = document.getElementById('mydiv1').innerHTML;
document.getElementById('mydiv2').innerHTML= divs;
Alternative in jquery You can use clone and put it in your target div. Example:
$('#mydiv1').clone().appendTo('#mydiv2');
Copy #mydiv1 into #mydiv2
Try this one in 2022.
let clonedDiv = document.getElementById('myDiv').cloneNode(true);
document.body.appendChild(clonedDiv);
I want to wrap a link which is in a div:
This :
<div id="hello">
http://google.fr/646564897564/8977748946
</div>
will be:
<div id="hello">
<div id="wrap">
http://google.fr/646564897564/8977748946
</div>
</div>
have a look here: http://jsfiddle.net/R44pn/
JS
var outer = document.getElementById("hello");
outer.innerHTML = "<div id='wrap'>"+outer.innerHTML+"</div>"
OUTPUT
<div id="hello">
<div id="wrap">
http://google.fr/646564897564/8977748946
</div>
</div>
with JQuery
$("#hello").html("<div id='wrap'>"+$("#hello").html()+"</div>")
fiddle here: http://jsfiddle.net/q27Sw/
hope it helps
Making use of jQuery you can use the wrapInner function:
var outer = $("#hello");
outer.wrapInner('<div id="wrap">);
http://jsfiddle.net/R44pn/6/