Get content of HTML element after changing it using jQuery
I have a div
<div id="test" class="test">From 0 to 0</div>
Then there is a function that replaces the content of the div
function divChange(aArg)
{
var sText = "From" + aArg[0] + "to" + aArg[1];
$("#test").html(sText);
}
And I have no control over this function or html. Can I somehow get the text of the div after changing it using javascript (I run greasemonkey over the site). Please note that the content of the div may be different or the same as before the change.
Update: Sorry, I forgot to mention something. First I start searching, then the asynchronous function will be run, after receiving all the data (time depends on the database used), then it will call this. So I want to get the data after the div is changed right after the search, otherwise the result will be wrong.
Simple logic: 1. I start naming a function, I have no control over 2. It will run at an unknown time. 3. After it finishes, it will call a function to change the content of the div. 4. I want to capture content at the moment.
source to share
The easiest way is to poll continuously:
var lastValue;
setInterval(function() {
var curValue = $('#test').html();
if(lastValue !== curValue) {
lastValue = curValue;
// Do whatever it is you want to do with the new value here.
}
});
The best way, assuming this function is being called in some asynchronous lookup function somewhere, would be to replace some function in the chain with the most advanced version:
oldDivChange = divChange;
divChange = function(aArgs, callback) {
oldDivChange(aArgs);
var newValue = $('#test').html();
callback(newValue);
};
source to share
You can use an object MutationObserver
like:
// select the target node
var target = document.querySelector('#test');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// output the new contents of the element to browser console
if(mutation.type === 'characterData') {
console.log(mutation.target);
} else {
console.log(mutation.target.innerHTML);
}
});
});
// configuration of the observer:
var config = { childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
source to share
You should be able to get the content of the div using getElementById using innerHTML or innerText for example.
document.getElementById('test').innerHTML; //or document.getElementById('test').innerText;
The difference between the two is explained here here . I would recommend using innerHTML and not innerText, though unless you have control over which browsers your users use, since innerHTML is W3C compliant.
source to share
If you have no control over the divChange function, you are limited in what you can do, but there is work to do. If you have control over this feature, you can create a custom event when the content changes and listen to it in your code, but if you can't do that, you need to try something like this:
var text = $('#test').text(),
intervalId = setInterval(function(){
var newText = $('#test').text();
if (newText !== text){
// do something with the new value and make sure you clear the interval
clearInterval(intervalId);
}
}, 500);
source to share