Hi I have a div with content like this
<div><strong>some content
....</strong></div>
How can I add another element to the div after <strong>, how to add <span> element after <strong> ?
Thank you
Just use append on your div element:
$('#divId').append('<span>Hi</span>');
It will insert the span element inside the div, at the end of the child node list.
Edit: In response to your comment, to remove it, since you added the element with append, you can get it selecting the last-child:
$("#divId span:last-child").remove();
Or you could remove all the span elements within the div:
$("#divId span").remove();
If the <div> is the only one on the HTML page in question:
$('div strong').after('<span>Span element</span>')
See http://docs.jquery.com/Manipulation/after#content
append and after are easily found in the documentation
Related
I have prepended one div inside some div with many others:
<div class="content">
<div>sss</div>
<div>aaa</div>
<div>bbb</div>
</div>
I added <div>ddd</div> before sss with:
$('.content').prepend('<div></div>');
And when I want to append some new element to new prepended div it add's it as text:
$('.content>div')[0].append('<p>ddd</p>');
If I remove [0] it works but it appends to all divs, I need that [0] to find first div.
To get the first element (that is still a jquery object) you can use .first():
$('.content>div').first().append($('<p>ddd</p>'));
Note that I also wrapped the <p> with $(...) to make it a valid html element (and not text).
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
How do you replace a <ul> inside a div by using the div's id in jQuery,
<div id="example">
<ul>
Content To Be Replaced...........
<ul>
</div>
$("#example ul").text('Content to replace');
You can select the div with the ID selector #. A space is used as an descendant selector, and .text changes the text content. You could also use .html to replace HTML content.
Simply do:
$("#example ul").html('New Content');
I presume you mean something like this?
$('#example ul').html('new content');
Absolutely no jQuery is needed:
var div = document.getElementById("example");
div.firstChild.nextSibling.textContent="bla"; //div
// textnode -> ul -> text
This can be compacted to:
document.getElementById("example").firstChild.nextSibling.textContent="bla";
// div --> textnode --> ul --> text
Yes, it is more code than jQuery, but it's also a lot faster..
You could even use:
document.querySelector('#example ul').textContent="bla";
Still 4-5 times as fast as jQuery, but using very similar, semantic syntax. No need to drop native JS because it's "hard" or anything.
I am working with the google maps drawing manager. They don't put id's or class names on the drawing tools button bar so I'm trying to do this myself.
First I want to remove the circle button which the below works fine, but I want to add my own button so need to add a class name to the parent div "gmnoprint" but google has about 5 div's all with the same class name. I just want to add it to the one where the circle button was found.
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint">
<div>
<div> <== This is what I found in my search
<span>
<div>
<img></img>
</div>
</span>
</div>
</div>
</div>
I am able to find the element I want and remove it, but adding a class to its wrapper div is proving a bit difficult for me.
This works for removing the button
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove();
});
This doesn't work.. Just add's the class to all ".gmnoprint" div's
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove().parent().addClass("test");
});
remove() removes the element from the DOM and returns the free-standing jquery object which has no connection to the DOM at all. A call to parent() after calling remove() is incorrect and that likely is the cause for your issue.
Try splitting your statements to:
var toRemove = $(this).find("[title='Draw a circle']");
toRemove.parent().addClass("test");
toRemove.remove();
You can use jQuery insertAfter and out your button after that default button then remove it.
$(".gmnoprint").each(function(){
var defBtn = $(this).find("[title='Draw a circle']");
$('<button class="my-button" />').insertAfter(defBtn);
defBtn.remove();
});
Or use jQuery after like this:
$(".gmnoprint").each(function(){
$(this)
.find("[title='Draw a circle']")
.after($('<button class="my-button" />'))
.remove();
});
You can use child selector to target the elements
$(".gmnoprint > div > div").addClass('myClassName');
At that point you could replace the html of the whole div , or find the span and replace it's inner html. Using html() method you don't need to use remove() as it will replace all contents of the element(s)
$(".gmnoprint > div > div").addClass('myClassName').find('span').html('<newButton>');
API Reference : http://api.jquery.com/child-selector/
I have a structure that looks like this..
<div class="infobubble">
<p>
PLACE CONTENT HERE
</p>
</div>
How do I use jquery to target the in tags?
I tried this but did not work.
$("infobubble p").html('My Text');
Your code is wrong, you need to specify that you are looking for a class, like so
$(".infobubble p").html('My Text');
Your code $("infobubble p") would be looking for a tag element named infobubble which does not exist
$(".infobubble p").html('My Text');
in jQuery you need to add an '.' to select by class or '#' to select by id.
If no '.' or '#' is specified, jQuery will try to find an element by tag name... in your case it was trying to find <infobubble> which isn't an element.