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.
Related
I have used this library:
http://www.jacklmoore.com/autosize/
and in order to use it I should use syntax like below:
autosize($('textarea#description'));
or any other javascript selector.
But my textarea loaded by ajax and it is not working.
Is there any other selector that works with ajax elements?
Thank you
Just wrap the jquery selector around it and use .find() to narrow it down.
$.ajax({...}).done(function(responseHTML){
// depending on what the function is doing you may need to append it to the body first.
$(responseHTML).appendTo('body'); // or wherever you want to put it
$textarea = $(responseHTML).find('#description');
autosize($textarea);
});
I am curious about how I would go about writing a one-liner to take every div and surround its contents with marquee tags using jquery. For example I would like it to take
<div class="foo">Hello <div class="bar">World</div></div>
and turn it into
<div class="foo"><marquee>Hello <div class="bar"><marquee>World</marquee></div></marquee></div>
My original attempt that failed:
$("div").each(function() $(this).html("<marquee>"+$(this).html()+"</marquee>")});
It failed when it reached nested div tags because the outermost tag's contents was replaced when its marquee tag was added thus invalidating references to the inner tags. I'm not super worried about executing JavaScript again .
How would you do this?
Consider the recommendations from other users about not using deprecated elements, but for exemplification purposes, the following solution:
From the jQuery docs about .html():
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
The references and even events of children are removed by jQuery (well, not removed, they are just being created as new elements again, so you don't keep the previous events and references).
Don't use .html() then, and instead create a new marquee element and append the children of the original div to it, then append that marquee to the div:
$("div").each(function(){
var newMarquee = $('<marquee>');
newMarquee.append($(this).children());
$(this).append(newMarquee);
});
javascript experts,
i have this script in my template to load some html divs.
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'
+ $("#showlink").html()
+ '</div><div id="wrapright">This is text display by append</div></div></div>');
});
Now what problem i got
Now whenever i used to remove any other ID by getelemebyID script in a template then the above html all divs like wrap,inner-wrapp etc becomes completely removed. why it happened ?
Example i used the below script to remove some other IDs. but it also reflect that append body html div ids removed too. why as you see i set only slider id to remove which is not in that append body. but it reflect that append body html divs too. why ?
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
document.getElementById("slider").remove();
})
//]]>
</script>
working/showing the append divs when there is no "getelementbyid removed" script used for any Id: https://jsfiddle.net/83fbnwe4/15/
not working/not show the append divs when i set "getelementbyid removed" for any other iD: https://jsfiddle.net/83fbnwe4/18/
Please could you tell me why it happened. Why it reflect also the append html divs, since i only set #slider to removed, not that append bodys htmls.
Your issue is you are attempting to call the jQuery remove method on a standard DOM element. The remove method only works on jQuery objects. You really want to do this:
$(document).ready(function() {
$("#slider").remove();
});
If you do not want to use jQuery to remove the element, you can do this:
var element = document.getElementById("slider");
element.parentNode.removeChild(element);
This is how Javascript works. You cannot remove elements directly, you need to go to its parent and then use the removeChild method to remove an element. This is why jQuery uses this approach behind the scenes and makes it look a lot easier than it actually is.
In the newer versions of the Javascript specification, remove is an added method. However, it is still best practice to use the above approach or a polyfill (which uses this same approach) because Safari mobile does not support it, and none of the IE's (only Edge) supports it as well.
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');
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