I have the following div structure
<div id="main_div">
<div id="lastChildDiv"></div>
</div>
now I want to create or append a new div above the div id of lastChildDiv. Then how to do it?
Use prepend
$('#main_div').prepend('<div id="new_div">...</div>');
Use before to append the newly created element:
$('#lastChildDiv').before('<div></div>');
You can use the .before()
$('#lastChildDiv').before('<div></div>');
var myNewDiv = '<div id='someId'></div>';
$('#main_div').html(myNewDiv);
or:
var myNewDiv = '<div id='someId'></div>';
$('#main_div').append(myNewDiv);
Related
Is there a way to assign nested div attribute with variable? Like
<div>
<div>
123456
</div>
</div>
Become
<div>
<div sectionid="123">
123456
</div>
</div>
BTW above component will be created by JavaScript.
I've tried something like this, but it didn't work.
var a = $('<div><div>123456</div></div>');
a.eq(":nth-child(2)").attr("sectionid", "123");
Try this snippet.
//FOR DOM HTML
console.log("FOR DOM HTML");
//1st way
$('#input > div').find('div').attr("sectionid","123");
console.log($('#input').html());
//2nd way
$('#input > div > div').attr("sectionid","321");
console.log($('#input').html());
//JS HTML
console.log("FOR JS OBJECT");
var input = $('<div><div>123456</div></div>');
//1st way
input.eq(0).children().attr('sectionid', '456');
console.log(input[0].outerHTML);
var input = $('<div><div>123456</div></div>');
//2nd way
$(input[0]).children().attr('sectionid', '789');
console.log(input[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input">
<div>
<div>
123456
</div>
</div>
</div>
nth-child(2) maches elements that are the second child element of their parent. This is not the case for your div, it is the first element of the parent div.
.eq finds an element at a specific index. It is not the place to pass a selector.
The child selector, >, will find a child element, i.e. div>div will find a div that is an immediate child of a div.
Note that the code you've provided, $('<div></div>123456<div></div>');, doesn't create a DOM tree like the one you've pasted.
Update, now that the code is edited, the value of a is a div with a child div. Since a.find will perform a search within a, you don't have to use a child selector, but can find the div immediately:
a.find('div')
Just apply attribute to children. No complicated 'find', eq(), etc.
var a = $('<div><div>123456</div></div>');
a.children().attr('sectionid', '123');
$('body').append(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Why don't you add it in the first place? Not clear if you add it later!
$(document).ready(function() {
var sectionid = "123";
var a = $('<div><div sectionid="' + sectionid + '">123456</div></div>');
$('body').append(a);
});
div[sectionid]{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this - I have added comments to the code to explain what is happening.
Inspect the element to see that the attribute is added
var a = $('<div><div>123456</div></div>'); // change this to match the structure you want
a.children() // .children gets the direct descendant (which should be the nested div
.eq(0) // gets the first in the array that is returned (if there are multiple direct descendents) - it is a 0 based index selector
.attr('sectionid', '123');
$('body').append(a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
More information about .children()
More information about .eq()
try it :
$(document).ready(function(){
$("div").eq(1).attr("sectionid","123");
})
How to create element with class name using javascript ?
i tried to create element like this
<div class ="dialog_red_top_page">
<div class ="inner_dialog_red_top_page">
<p class="dialog_red_top_page_text">
test
</p>
</div>
</div>
by using javascript but not work , how can i do that ?
http://jsfiddle.net/n5phf/186/
<script type="text/javascript">
$(window).load(function(){
$('#myBtn').click(function(){
var div = $('<div class ='dialog_red_top_page'><div class ='inner_dialog_red_top_page'><p class='dialog_red_top_page_text'>test</p></div></div>');
div.html("test");
div.appendTo('#wrapper');
});
});
</script>
1st : the problem with quotes use " around class instead of single one
2nd : with div.html("test"); you change the div html to <div>test</div>
you can use .html() for wrapper
$('#myBtn').click(function(){
var div = $('<div class ="dialog_red_top_page"><div class ="inner_dialog_red_top_page"><p class="dialog_red_top_page_text"">test</p></div></div>');
$('#wrapper').html(div);
// you can try .append instead of .html() just give it a try
//$('#wrapper').append(div);
//$(div).appendTo('#wrapper');
});
Working Demo
Your quotes are all singel quotes
Do it like this
var div = $('<div class="dialog_red_top_page">'
+ '<div class="inner_dialog_red_top_page">'
+ '<p class="dialog_red_top_page_text">test</p>'
+ '</div></div>'
);
Wrap the classes name by " instead of ' and remove div.html("test");. It says replace html of selected element by test it means it removes .inner_dialog_red_top_page and replace it by test.
Jsfiddle
Escape all ' characters with a \':
var div = $('<div class =\'dialog_red_top_page\'><div class =\'inner_dialog_red_top_page\'><p class=\'dialog_red_top_page_text\'>test</p></div></div>');
What your code actually does is: creates a div with div and paragraph inside, but then you call:
div.html("test");
which overrides content of .dialog_red_top_page div.
jsfiddle
your code should be like this:
$('#myBtn').click(function(){
$("<div class ='dialog_red_top_page'><div class ='inner_dialog_red_top_page'><p class='dialog_red_top_page_text'>test</p> </div></div>").appendTo('#wrapper');
});
i have got this :
<div id="video_pattern">
<div id="des"position:relative;></div>
<div id="mes"position:relative;></div>
</div>
i want to remove the
> <div id="video_pattern">
but the
<div id="des"position:relative;></div>
<div id="mes"position:relative;></div>
should stay, is this possible?
To handle your exact situation you can use this code:
var ToRemoveElement = document.getElementById("video_pattern");
ToRemoveElement.parentNode.appendChild(document.getElementById("des"));
ToRemoveElement.parentNode.appendChild(document.getElementById("mes"));
ToRemoveElement.remove();
This is the way to go if you only want these specific elements removed from the video_pattern div. If you want a more generic solution to remove all child elements then use the following:
var ToRemoveElement = document.getElementById("video_pattern");
var children = ToRemoveElement.children;
while (children.length > 0) {
ToRemoveElement.parentNode.appendChild(children[0]);
}
ToRemoveElement.remove();
JSfiddle example
Using Jquery you can do like this
var inner = $("#video_pattern").contents();
$("#video_pattern").replaceWith(inner);
I'm pretty sure I'm close but I don't know what I'm missing:
var newId = 1;
$("#trigger").click(function(){
$("#new-div").attr('id', 'new-div' +newId++).clone().appendTo("#myDiv");
});
I set breakpoints: I can see the counter auto-incrementing, but the cloned div does not appear where it should. I get no errors. HTML for this:
<div id="secret-div" style="display: none;">
<div>This is new div number </div>
</div>
<p><a id="trigger" href="javascript:void(0);">Please, add an element</a></p>
<div id="myDiv"></div>
The issue is that you're changing the ID of your element before cloning and appending, resulting in 2 elements with the same ID, breaking your selector and code.
Fixed Live Demo
HTML:
<div id="secret-div" style="display:none;">
<div>This is new div number <span class="spnNewDivNumber"></span></div>
</div>
<p><a id="trigger" href="javascript:void(0);">Please, add an element</a></p>
<div id="myDiv"></div>
JavaScript:
var newId = 1;
$("#trigger").click(function() {
var $newSecretDiv = $("#secret-div").clone().attr('id', 'new-div' + newId++);
$newSecretDiv.show().appendTo("#myDiv");
$newSecretDiv.find('.spnNewDivNumber').text(newId - 1);
});
Your current code is applying the new id before the clone, which means it's changing the id of the existing div. This in turn means that the next time the click handler is called, there won't be a div matching the selector '#new-div'.
Try applying the id after either the clone, or after inserting it into the DOM:
var newId = 1;
$("#trigger").click(function(){
$("#new-div").clone().attr('id', 'new-div' +newId++).appendTo("#myDiv");
});
OR
var newId = 1;
$("#trigger").click(function(){
$("#new-div").clone().appendTo("#myDiv").attr('id', 'new-div' +newId++);
});
You are attempting to clone the #new-div unless your current div is named 'new-div'. Also you are changing the id of the original div rather than creating a new one with the generated id.
I have some div elements having class name hover, these div elements have parent divs having class name hoverparent but the id's of these parent elements are different.
Is it possible to get the ID of respective .hoverparent element while hovering on my .hover div elements?
I tried to get this by:
$('.hoverparent').attr('id')
But it gives the same first parent id every time.
Structure is like:
<div class="hoverparent" id="hover-1">
<div class="hover">ABC</div>
</div>
<div class="hoverparent" id="hover-2">
<div class="hover">DEF</div>
</div>
You need to use the parent or closest functions to traverse up the DOM tree to find the "parent" element you are looking for:
$(".hover").hover(function() {
var $parent = $(this).closest(".hoverparent");
alert($parent.attr("id"));
});
The difference between parent and closest is that the first will only work if the .hoverparent element is the immediate parent of the .hover element; closest will search upwards through all ancestors to find it.
try $(this).parent().attr('id') , in your hover callback.
$('.hover').mouseover(function() {
$(this).parent().attr('id');
});
don't call your class hover. this should work
$(".hover").hover(
function () {
var id = $(this).parent().attr('id');
});
Add each loop like this :
$(".hoverparent").each(function(){
var id=$(this).attr("id");
alert(id);
});
Use the parent method in the handler for the hover event:
$('.hover').hover(function(evt){
var par = $(this).parent().attr('id');
//Now do with ID what you need
},
function(evt){
//presumably you don't need anything for mouseout
});
You can try the parent() method.
Like this:
$('a').click(function(){
var parentId = $(this).parent('div.hoverparent').attr('id');
});
Try the following:
$('.hover').hover(function() {
var parentID = $(this).parent().attr('id'); alert(parentID);
});
$(".hover").hover(function(){
console.log($(this).closest(".hoverparent").attr("id"));
});
here is the fiddle http://jsfiddle.net/9dJJ9/1/show/