I have this template:
<script id="work-template" type="text/template">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>
</script>
After I try to get body element with this code:
base_html = $('#work-template').clone();
alert(base_html.find('body').length);
But, it returns 0. How it can be?
The contents of #work-template are a string, not a DOM tree. You're trying to access the contents as if it is HTML markup, but it's unparsed.
If you were to use something like jquery-templates, you could do what you're attempting here:
$.tmpl($('#work-template').text(), {}).find('body').length;
Other alternatives would be Handlebars, Underscore, and a whole wealth of others.
Or, as Kevin says, you could just parse it with plain jQuery and $.parseHTML, but you can't do any extra fanciness with token replacement or loops:
$.parseHTML($('#work-template').text()).find('body').length;
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function displayString() {
return "<h1>Main Heading</h1>"
}
displayString();
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
<script>
document.write("Execute during page load from the body<br>");
</script>
</body>
</html>
So this is my problem. No matter where I put the displayString(), the h1 just never seems to show up on the browser. Can anybody please help me see where I am wrong? I am new to JavaScript. Oh, and what I am trying to do is to call the function.
You need to write the returned String to the document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function displayString() {
return "<h1>Main Heading</h1>"
}
document.write(displayString());
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
<script>
document.write("Execute during page load from the body<br>");
</script>
</body>
</html>
No matter where I put the displayString(), the h1 just never seems to
show up on the browser.
If you wish to add a new element to a document, several approaches are available:
document.write (effectively deprecated)
.innerHTML (sometimes useful, but can be slow)
DOM API - recommended approach
The recommended approach is to use the DOM API.
DOM stands for Document Object Model. Essentially it's the markup of your document represented as a tree-like structure of nodes. There are many DOM API functions which allow you to:
add
remove
append
prepend
insert
update
new DOM nodes.
Any DOM node may be added, removed or updated, including:
parent elements
child elements
sibling elements
element attributes
ids, classNames, classLists
custom data-* attributes
text nodes
Here is an example:
function displayMainHeading () {
let mainHeading = document.createElement('h1');
mainHeading.textContent = 'Main Heading';
document.body.prepend(mainHeading);
}
displayMainHeading();
<p>Paragraph 1</p>
<p>Paragraph 2</p>
Further Reading
This is a good primer to get you started:
A Beginners Guide To DOM Manipulation by Iqra Masroor
The question How do I get the entire page's HTML with jQuery? might look similar, which helps in obtaining data from <html> and <!DOCTYPE>. But in addition, I also require to obtain any comments that persist before the <html> tag.
I am displaying the page with the help of srcdoc attribute using jQuery. My current code to obtain the data is
$("#myiframe").contents().find('html')[0].outerHTML;
and a snippet in this answer to obtain <!DOCTYPE html>
Sample use case:
<!--
This comment will be used for further processing
-->
<!DOCTYPE html>
<html lang='en'>
<head>
...
</head>
<body>
...
</body>
</html>
<!--
This comment will be used for further processing
-->
The current output is only from <!DOCTYPE html> to </html>. Expected to have the comments outside.
Have a look at jQuery's $.get function. This basically returns everything you would retrieve with a normal GET request.
https://api.jquery.com/jquery.get/
Try this:
$('iframe#myiframe').load(function() {
getFrameContent(this.contentWindow.location);
});
function getFrameContent(windowURL) {
$.get( windowURL, function( data ) {
//where 'data' is the page contents
$( "#whateverElementYouWant" ).html( data );
});
}
I have a weird situation where I need to run a script inside of the <title></title> tags. I have no access to any of the others parts of the page, including the <head></head> tags. It has to be within the <title></title> tags (the reason is because we are dealing with an iframe response from a 3rd party server and we don't really have access to the full page.).
What I tried was:
<title>
<script type="javascript">
runMyFunction();
</script>
</title>
The problem is that it interprets the whole thing as a script. Is there anything I could do to tell the browser to run that code as a script and not treat it as a string?
You can't.
Per the HTML5 specification, the only permissible content of the <title> tag is plain text. Other tags, such as <script> tags, cannot be present in the context of a <title>.
<title>[trick</title>
<script type="javascript">
runMyFunction();
</script>
<title>:)]</title>
Everyting between the [] is what you should set as title. Most probably it won't work though, 'cause if I were them I would properly encode whatever string you send, in order not to let you do any tricks...
Can you just rewrite <title> later?
<head>
<title>My Title</title>
<script>
document.title = runMyFunction()
</script>
</head>
I have a simple html page is as-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var s = $("#d").get(0).getElementsByTagName("a");
for(var x=0;x<s.length;x++){
document.writeln(s.length);
}
var k=document.createElement("a");
k.innerHTML="hello";
var q=document.getElementById("d");
q.appendChild(k);
});
</script>
</head>
<body>
<div id="d">
<a><img class="zzz"/></a>
<a><img class="zzz"/></a>
</div>
</body>
</html>
Javascript executes only up to for loop (element k is not appended). If for loop is removed then only element k got appended. Isn't code below for loop is supposed to be executed after for loop execution?
Welcome to StackOverflow! A few suggestions to help you as you are learning to develop:
Always use meaningful variable names, it's hard to keep track of what
single letter variables represent
Don't use document.write for
debugging, use the console for that
If you are using a library like
jQuery, try to use it as much as you can when you are beginning to
learn it. Only fall back to basic javascript if you have a compelling
reason to do so
Your function can be rewritten in pure jQuery like so:
$(function() {
var container = $('#d');
console.log(container.find('a').length);
container.append('<a>hello</a>');
});
I haven't run your code, but your error probably has to do with this statement: $("#d").get(0).getElementsByTagName("a");. The eq() method returns a jQuery object, which does not have a getElementsByTagName() method on it.
If you want a plain DOM object without the jQuery wrapper you can address the jQuery object like an array: $('#d')[0].getElementsByTagName("a");, though like I said, it's best to stick with the jQuery library if you are going to use it.
Good luck as you learn!
you can't use writeln (or write) after the document has been loaded(or I better say: you shouldn't, because it will overwrite the complete document, including #d , what will force the error, because this element isn't available anymore after the usage of writeln )
I guess you want something like this:
$(document).ready(function(e) {
$('a').prepend(function(i){return i;});
$('#d').append('hello');
});
Demo: http://jsfiddle.net/stRBU/2/
Assuming I have the following two JQuery functions -
The first, which works:
$("#myLink_931").click(function ()
{
$(".931").toggle();
});
and the second, which doesn't work:
$("#myLink_931").click(function ()
{
var class_name = $(this).attr("id").split('_')[1];
$("."+class_name).toggle();
});
I want to replace the first with the second, which is more generalizable, but can't find any obvious syntactical problem with the second which might be preventing it from working.
My guess is there's a problem with the syntax:
"."+class_name
Is this bad syntax?
They work the same.
Working Demo
This is what debuggers are for. Step through the code and make sure class_name is calculated as you expect. The debugger should let you view the result of "."+class_name as well.
I created a sample page and dropped your example code in and it worked as expected. Perhaps there is another issue on the page? Can you post a link to the actual site?
Here is the code I used:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<div id="myLink_931">Click Me</div>
<div class="931">HI</div>
</body>
</html>
and the script file:
(function($) {
$(document).ready(function() {
$("#myLink_931").click(function() {
var class_name = $(this).attr("id").split('_')[1];
$("." + class_name).toggle();
});
});
})(jQuery);
Class names and IDs aren't allowed to start with numbers - doesn't explain why one works and the other doesn't though. Give us a bit more info as above.
Is it possible you're not wrapping your 2nd example in the ready syntax [i.e. $(function(){ })] which would mean that the elements haven't been created in the DOM yet?