How would I go about removing the content inside a div tag with the class content.
<div class="content"></div>
I would imagine it would be something like:
$(.content).remove
Separately, how would I go about adding a string of text inside that same div?
Use .empty() to remove the contents in the Div tag.
$('.content').empty();
For your second question; you can add the any text or content using $('.content').html(newcontent) or
$('.content').text(newcontentText); //specifically for text content.
remove() removes the element, I think you're looking for empty() to keep the element, but remove everything inside it.
$('.content').empty();
to add a string of text, you would'nt need empty(), you could just do:
$('.content').text('My new string here');
Related
I tried to redefine the document.ready function to capture what should have been written after document.ready
$(document).ready(function(){
document.write = function(html){
//... do something with HTML
};
});
I do have the HTML now which should be rendered, but I don't know where it should belong to.
Is there a way to find out which script called the document.write function (in order to place the HTML code in the right place)?
You don't need to use document.write in this situation. You use a jquery selector and the .html() method (or .append() or similar) to place content inside an element.
For example, if you had a div with the class container
var content = '<p>Some content</p>';
$('div.container').html(content);
this code would replace the contents of the container with the value of content. You'll notice that CSS style selectors are used for selecting elements, so to select the entire body you can use
$('body')
or for all text inputs, you can use
$('input[type="text"]')
.html() will replace the entire innner content, and .append() will add to the element after the other content.
I had added a div to 'parent of share button', and then i tried to append some span to 'share button'
1. $("#ShareBtn").parent().html("\\ i had appended some div code here");
2. $('#ShareBtn').html("\\some more code i added here");
but first action is successful,second one is failing..
can any one help me?
The first call would delete the #ShareBtn since jquery .html() replace all the elements contained inside the element, you would want to use .append() instead.
This is what's happening:
<div id="parent">
<div id="shareBtn"></div>
</div>
after you run this line
$("#ShareBtn").parent().html("\\ i had appended some div code here");
the element would look like this:
<div id="parent">
\\ i had appended some div code here
</div>
rendering the second line of code useless since the element ShareBtn doesn't exists anymore.
You have to know that $.html(); in jQuery doesn't append code, but replaces the innerHTML (see Javascript) of an element. In you code $('#ShareBtn') doesn't exist anymore after overwriting its parent content.
I have a div element like:
<div id="abc">....</div>
It is hidden or display:none by default on page load.
I know want to append this div and its content somewhere else, and make it visible, but the original should remain not visible (or I can remove it).
How can I do this?
I'm currently appending it but it is showing up in 2 places.
Take the HTML from your hidden div and append it to your target using .html() and .append()
var html = $('div.hidden-div').html();
$('div.target-div').append(html);
To show the target div then remove the old one, do the following:
$('div.target-div').show();
$('div.hidden-div').remove();
Deep clone, append, remove id attribute and show.
$("div#abc")
.clone()
.appendTo("div#other")
.removeAttr("id")
.show();
Remove or modify your id attribute, having multiple elements with same id is troublesome. If you happen to use CSS classes you could also use it this way:
.template {
display: none;
}
$("div.template")
.clone()
.appendTo("div#other")
.removeClass("template");
If it is OK to remove it (as you said), just append it to the other element. The element will automatically be removed from the first place and never show up there.
$("#abc").appendTo(place2).show();
The directive replaceWith as used in the code below only changes the target content once. If I send any other object the alert shows the proper value but not the div.
function identify (thisobj) {
alert(thisobj.value);
$("#test").replaceWith(thisobj.value);
}
The target element is shown below.
<div id="canvas_container">
<div id="test">This is a test</div>
</div>
Various objects are being passed, here, each with a different value. But though the Alert() reflects the proper content, the #Test only allows a one time change and then it retains that value forever.
You are replacing #test with your new element. It won't work again unless the element you replace it with also matches that selector.
From the jQuery docs:
The .replaceWith() method removes content from the DOM and inserts new
content in its place with a single call.
Assuming you want to keep the #test element, you can use the html method to replace the contents of it, rather than the element itself.
.replaceWith() substitutes an entire DOM node; you should be using .html(thisobj.value) or .text(thisobj.value)
You have misunderstood the use of replaceWith: it replaces the element you call it on, so after the first use, there is no element #test anymore.
You want text or maybe html:
$("#test").text(thisobj.value);
If your value contains html, use:
$("#test").html(thisobj.value);
replaceWith removes the #test element and replaces it with what you set (thisobj.value).
To replace an element's content, use .html() (or .text()).
function identify (thisobj) {
alert(thisobj.value);
$("#test").html(thisobj.value);
}
replaceWith will replace the entire element, to replace the content within #test, use:
$("#test").html(thisobj.value);
Have you looked into jQuery's text() function? If not, http://api.jquery.com/text/
It may help with replacing text
Suppose I have the following HTML element:
<span id='kuku' class='lala bubu' value='xyz'>some text</span>
I know that .html() returns the inner part of the element, i.e. some text.
How could I get the whole element as string, containing <span>...</span>?
Most browsers support the element.outerHTML property. You may also want to check out the following Stack Overflow post for an alternative solution (for non IE browsers):
How do I do OuterHTML in firefox?
Try this:
alert($('#kuku').clone().wrapAll("<div/>").parent().html());
clones the element you want
wraps it in a div
selects the parent (the new div)
gets the HTML
You can also do it like this:
alert( $('<div>').append( $("#kuku").clone() ).html() );
This one creates an empty div and appends a copy / clone of the element with id kuku to it. It then returns the innerHTML of that previously empty div, which now has in it precisely the HTML you are after.
Simply get the owner of the span. So use the id of the owner/container of the span and use
document.getElementById("urSpanOwnerID").innerHTML