Menu
This sounds a little crazy, but I'm wondering whether possible to get reference to comment element so that I can dynamically replace it other content with JavaScript.
<html> <head> </head> <body> <div id="header"></div> <div id="content"></div> <!-- sidebar place holder: some id--> </body> </html> In above page, can I get reference to the comment block and replace it with some content in local storage?
I know that I can have a div place holder. Just wondering whether it applies to comment block. Thanks.
589
Single line Javascript comments start with two forward slashes (//). All text after the two forward slashes until the end of a line makes up a comment, even when there are forward slashes in the commented text.
Just add /**/ to the beginning and end of the block. Then add a space to the end of the top comment, /** / , to toggle the whole block.
One of the most common ways of getting a reference to an html element with javaScript is to use the document.getElementById method which is one of many methods to be aware of in the document object that is worth looking into in detail.
Block comments are often used for formal documentation. Using comments to prevent execution of code is suitable for code testing. Adding // in front of a code line changes the code lines from an executable line to a comment. document.getElementById("myP").innerHTML = "My first paragraph.";
@ref and ElementReference When we require a reference to an HTML element we should decorate that element (or Blazor component) with @ref. We identify which member in our component will hold a reference to the HTML element by creating a member with the type ElementReference and identify it on the element using the @ref attribute.
Single line comments start with //. Any text between // and the end of the line will be ignored by JavaScript (will not be executed). document.getElementById("myP").innerHTML = "My first paragraph.";
var findComments = function(el) { var arr = []; for(var i = 0; i < el.childNodes.length; i++) { var node = el.childNodes[i]; if(node.nodeType === 8) { arr.push(node); } else { arr.push.apply(arr, findComments(node)); } } return arr; }; var commentNodes = findComments(document); // whatever you were going to do with the comment... console.log(commentNodes[0].nodeValue); It seems there are legitimate (performance) concerns about using comments as placeholders - for one, there's no CSS selector that can match comment nodes, so you won't be able to query them with e.g. document.querySelectorAll(), which makes it both complex and slow to locate comment elements.
My question then was, is there another element I can place inline, that doesn't have any visible side-effects? I've seen some people using the <meta> tag, but I looked into that, and using that in <body> isn't valid markup.
So I settled on the <script> tag.
Use a custom type attribute, so it won't actually get executed as a script, and use data-attributes for any initialization data required by the script that's going to initialize your placeholders.
For example:
<script type="placeholder/foo" data-stuff="whatevs"></script> Then simply query those tags - e.g.:
document.querySelectorAll('script[type="placeholder/foo"]') Then replace them as needed - here's a plain DOM example.
Note that placeholder in this example isn't any defined "real" thing - you should replace that with e.g. vendor-name to make sure your type doesn't collide with anything "real".
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
