Modifying innerHTML of an element created with innerHTML - javascript

Basically, I have a div that I insert content into with innerHTML. A segment of the HTML inserted is:
<p style="text-align:center;"><span class="bold" id="timer">00:00:00:0</span></p>
This is a timer that should increment using a setTimeout. Later, I call the following function to modify the timer block:
document.getElementById("timer").innerHTML = output;
When checking the innerHTML property with Firebug or an alert, the innerHTML of the span element is incrementing (e.g. it will say "00:00:10:6" or "00:01:01:4"). However, the page does not reflect the changes; the browser still shows 00:00:00:0.
I tried placing the span directly on the page as opposed to through modifying the div with innerHTML, and only then does it work. Is there anyway to make it work with innerHTML on the div?
EDIT: The page is -----
Try using Firebug or the Chrome console to check the follow:
document.getElementById('bunny-timer').innerHTML
EDIT 2: URL removed.

Without seeing the code, my best guess is that you're accidentally creating duplicate ids, and the element you're seeing is different than the one you're inspecting.

Look at this: http://plugins.jquery.com/project/timers. As you're already using jQuery quite a lot, why not play with their timer functions? They seem to be quite well-made.

Related

HTMLCollection returning null

I have already looked at other stackoverflow posts and none of them fix my error.
Trying to get the divs inside the outer div with class name "CodeMirror-code"
I'm building a chrome extension that directly modifies the html content of a specific webpage and when I call
const variable = document.getElementsByClassName('CodeMirror-code');
console.log(variable);
console.log("Length:", variable.length);
the output is: this
Now, when I try to call the first item of HTML collection like
variable.item(0)
this returns undefined or null
Other solutions says that you should surround the code in window.onload function in order for the DOM elements to be loaded in.
I did this, and there was no change.
Is there any way I can fix this error?
Update:
This is what is inside the HTML collection
Surround your code in a set interval function within window.onLoad and add some delay (like 2000 for 2 seconds). The only thing that gives HtML collection null is the loading latency of dom elements. If adding delay is still not helping then try to retrace the parents of your div and see till what point your js code is able to catch the expected div. Then check whether its the problem with load time or scope of the code.

when editing script elements code, should it be edited with textContent or innerHTML? or something else?

for example,
function browserInjectCode(code){
let ele=document.createElement("script");
ele.textContent=code;
document.head.appendChild(ele);
}
browserInjectCode("console.log(\"js code may contain html elements\");\n\/\/ <this><is><a><comment>");
given that javascript may contain html elements, i wonder, should code in script-elements be edited with .innerHTML or .textContent ? should the above function use ele.textContent=code; or ele.innerHTML=code; ? is there even a difference?
From the docs:
Differences from innerHTML
innerHTML returns HTML, as its name indicates. Sometimes people use
innerHTML to retrieve or write text inside an element, but textContent
has better performance because its value is not parsed as HTML.
Moreover, using textContent can prevent XSS attacks.
You can use either, but it depends on your use-case.
Basically, innerHTML is meant to keep the html qualities of the code (as the name suggests), including html tags within your code (like keeping the functionality "strong" in a "p" tag). Example: If you had the following div;
<div id="hi"><strong>hi hello</strong></div>
and got the innerHTML value it would give you the following;
<strong>hi hello</strong>
innerContent would not keep an html element's value but would keep the content of the div;
hi hello
Another Javascript tool called innerText would simplify further by giving you the text but would not give you the extra space put between the text;
hi hello
I think that if you are adapting the contents of a script tag it would make the most sense to use innerContent. I hope this is helpful. If you want a more detailed explanation, go the following link; https://medium.com/better-programming/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc.

Race condition when hooking appendChild

I've encountered a really weird race condition when hooking appendChild.
consider this code:
var RealAppend = IframeWindow.Element.prototype.appendChild;
IframeWindow.Element.prototype.appendChild = function(){
RealAppend.apply(this, arguments); //some more code here --- >};
I'm hooking some iframe appendchild that's why I'm doing "IframeWindow.Element.prototype.appendChild" with the IframeWindow as the iframe content window.
Now after I'm hooking the appendchild then I start to append nodes to the iframe , one of the nodes is a simple div element with id="somediv" , and another node is a javascript element and as soon as the javascript is executed it will use document.createElement to create an iframe and set its attributes and than it will execute document.getElementById('somediv').appendChild(CreatedIframe);
which will append the created iframe to the "somediv" , my goal here is to intercept the last appendchild and hook the appendchild of that iframe also.
now a first I thought that maybe I need to actually override the appendchild like this:
someDiv.appendChild = function(){.....
but after more tests i can see that sometimes my code does succeed and hooks the last iframe and sometimes the SomeDiv.appendChild is the native code and my code fails.
Any ideas why?
EDIT:
I think its might related to the fact that i'm using
document.createRange().createContextualFragment(strHTML);
}
to parse html as string and then append the nodes to the iframe so maybe the div (somediv) is getting a clean appendChild from there? but why sometimes it does work and sometimes not?
one other thing is that after the page loads and i'm using dev tools to get the somediv.appendchild i'm getting the hooked code every time so the problem happens only when the javascript code executes
So i managed to figure out what was the problem, so if anyone will ever encounter this here is the solution:
When i was parsing the html string to nodes so i can append them to the iframe i was first using the "DOMParser" API and i missed the fact that the DOMParser uses the document from the caller contentWindow so instead of calling DOMParser like this:
new DOMParser();
i needed to call it like that:
new HookedIframeContentWindow.DOMParser();

innerHtml not working for nested div tags

I am not able to replace .innerHtml for a div tag which is nested in other div tags. I used firebug to make sure that getElementById() is working.
<div class="a">
<div class="b"><div id="hello"></div></div>
</div>
In javascript code I am using:
document.getElementById("hello").innerHTML = "hello world";
Using firebug, I have verified that "hello" div is picked up (that is, it is not null). But the string "hello world" is not showing up.
Kindly help.
Thanks.
use innerHTML rather than innerHtml. note the capitalization.
On a side note, IE also supports innerText.
The example you provided works for me... so, I think you should make sure that the script is executed after the element has been created in the DOM.
For example, place the script element after the div you want to add contents to.
So if this fixes the issue, then you should add an event listener to the window’s onload event which will run all scripts.
And as Amaan said, don’t place a div element inside an a element.

how to change the value of <span lang> in javascript?

i have an element in html as shown below.
<tr><td class="HELPTEXT"><span lang="HLPMTXT1" id="HLPMTXT1"></span></td></tr>
i want to change the value of lang according to particular condition.
I tried as given below.but its not working.
<script>
document.getElementById("HLPMTXT1").lang ="HLPMTXT2"
</script>
Could anyone help me for changing the value of lang attribute of span?
You should use setAttribute(name, value) to do that, so your code would look like:
document.getElementById("HLPMTXT1").setAttribute("lang", "HLPMTXT2");
You can also use getAttribute(name) to retrieve the value using JavaScript.
https://developer.mozilla.org/en/DOM/element.setAttribute
https://developer.mozilla.org/en/DOM/element.getAttribute
Edit: It's also possible that your script is not working because you're trying to access the element before it exists in the DOM. Best way to insure that your element exists is by either: a) putting your script tag after the element, b) using the unload event to delay execution of your JS until everything is loaded, or c) use the DOMContentLoaded event. The latter, however, is a bit tricky to get to work cross-browser (without reusing somebody else's code that already addresses those problems) so you might want to read up on it first.
document.getElementById('HLPMTXT1').setAttribute('lang', 'HLPMTXT2');
Not all attributes can be accessed through the object properties

Categories

Resources