I'd like to embed an html tag in Javascript, between the script> tag
Thanks
Hey maybe you're looking for jQuery.
$("p").text("<b>Some</b> new text.");
See embedded HTML tag.
Write Less, Do More
jQuery
Is E4X what you're looking for? It allows you to embed XML/XHTML within your JavaScript, like this:
var someXml = <div><b>Some Text</b></div>;
I doubt that's what you need, but that's the only way you can do what you're asking. Also, I don't think it works in Internet Explorer. Scratch that, it only works in Firefox.
If that's not what you want, use document.write(), as suggested by others.
Edit: E4X is now deprecated and has been removed from newer versions of Firefox. Don't use it. You should use jQuery, as the answer below me suggests, or simply create the elements via document.createElement and friends and inject them into the document.
You can't. If you want the Javascript to write HTML, you'll have to use document.write().
If you write this inside your body tag then also you can access this using your javascript.
If yo want to check whether the document is ready or not then you can use JQuery
You can't do that. tags can contain just text (usually javascript).
document.write('colour1: ' + colour1 + 'colour2: ' + colour2 + '');
Using document.write(), though it is generally advised against the use of this method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.write(`
<html>
<body>
<p>html in script tag</p>
<\/body>
<\/html>
`)
</script>
</body>
</html>
Related
Hello I'm very new to javascript and doing my first steps I was wondering if I could style the content of a variable in the document.write instruction and I came to this.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.style1{
background-color: chartreuse;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var name1;
name1=prompt("Write your name");
document.write('<p class="style1">'+name1+'</p>');
</script>
</body>
</html>
I got that solved by reviewing some posts here the question is how does this actually work?
document.write('<p class="style1">'+name1+'</p>');
I'm not sure I understand why I need to put ' for this instruction could somebody explain that please thank you btw I'm sorry this is a very basic question but I would like to know also if you guys have some more ways to style a document.write it would be nice to know .
I'd suggest taking a slightly different approach. You can add a div to your HTML with an ID of "test" (or whatever you'd like), then edit the innerHTML of that div like so:
document.getElementById("test").innerHTML = name1;
document.write : Write HTML elements with text directly to the HTML document
var name1;
name1=prompt("Write your name");
document.write('<p class="style1">'+name1+'</p>');
Create a variable named name1
Give a value to name1 variable from user input in prompt alert
Write p element with class style1 and its content is value from name1 to HTML document
document.write(); is writing a text in your HTML File.
so if you write like this:
<script>document.write("<p>blah</p>");</script>
then you are writing html Source like <p>blah</p>.
I'm looking for a Javascript equivalent of a technique I've been using in PHP. That is, to place even the most basic page setup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
...in a php file like 'doc_start.php' and then start every page in my site with...
<?php require_once('/path/to/doc_start.php); ?>
Now I need to begin a project that's strictly HTML and JS (no PHP) and want a similar way to avoid duplicating basic, common HTML elements. Obviously, I want to do more than this very basic stuff, like import JQuery in every page, link to a common stylesheet, etc. Again, all easy in PHP, but I'm still kind of a newbie in JS.
I've read about HTML5 includes, but can't seem to find anything that addresses what I want to do
In order to import other pages into your current document, you need to use a link tag.
For example....
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
This will allow you to reference other html, css or javascript documents into your page without copying and pasting the same code within each page.
https://www.w3schools.com/html/html_links.asp
Javascript and PHP are different languages for very different purposes. But assuming you have some element you don't want to repeat some elements one solution is the following:
Save the HTML elements that you don't want to keep repeating as a string. Then use the .innerHTML property to add elements.
The .innerHTML property stores the mark up of an element as a string.
For example, if we have the following <div>:
<div class="example"> <br> Hello there this is a test! </div>
...and we use .innerHTML:
console.log(document.querySelector(".example").innerHTML);
It will output "<br> Hello there this is a test!".
We can add to the .innerHTML using the += operator. So if you want to add something inside the body it's as simple as:
var something = "some HTML";
document.body.innerHTML += something;
Hope this was what you were looking for!
I have the following code which works properly in chome
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
//<![CDATA[
!function (){
window.stop();
var html = '<!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n</head>\n<body>\n \<script>console.log("loaded");<\/script>\ntext\n</body>\n</html>';
document.documentElement.innerHTML = html;
}();
//]]>
</script>
</body>
</html>
It prints "loaded" in the console. The same code does not work by firefox, it does not run the script, just prints the text.
(If you are curious why I need this, you can find it here: https://stackoverflow.com/a/30933972/607033 )
I tried possible solutions like this: https://stackoverflow.com/a/20584396/607033 but they did not work. Any idea how to work this around?
Note: there are many scripts in the HTML, e.g. bootstrap, jquery, facebook, google, etc..., not just a single inline script.
I think there is no way in firefox to replace the complete HTML document with javascript without leaving the actual page. A workaround to reuse the original document and replace only the head and body tags:
$('html').html(html);
does this automatically: it strips out the HTML tags, injects the head and the body and loads the scripts.
ref: https://stackoverflow.com/a/1236372/607033
I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.
Is there a way to use jQuery.html() and not loose the scripts and styles? or any other non-jQuery way?
I'm trying to output the full HTML of the page the user is on. Is this even possible?
jQuery.html() removes scripts and styles
That isn't my experience (see below). In practice, you have to be aware that what you get back by querying the DOM for HTML strings is always going to be the interpreted HTML, not the original, and there will be quirks (for instance, on IE all the HTML tag names are IN UPPER CASE). This is because jQuery's html function relies on the browser's innerHTML property, which varies slightly browser to browser. But the demo below includes both style and script tags on Chrome 4, IE7, and Firefox 3.6; I haven't tried others, but I would expect them to be okay.
If you want to get the content of externally-linked pages as well as the inline content, you will naturally have to parse the result and follow the src (on scripts), href (on links that have rel = "stylesheet"), etc...
Demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnGo').click(go);
}
function go() {
alert($('html').html());
}
})();
</script>
</head>
<body>
<input type='button' id='btnGo' value='Go'>
</body>
</html>
I see 2 scenarios here
you use jQuery.html(yourHTML) to overwrite the entire html of the page, so even the script tags were overwritten...
you use jQuery.html() to retrieve the entire document html. if this is the case you need tu ensure that the element on which .html() function is used, is the entire html... as T.J. Crowder suggested $('html').html()