How to get the full source code (including comments) with JavaScript but without traversing the DOM tree of the following page?
I am looking for something like document.innerHTML because document.documentElement.outerHTML does not include the surrounding comments.
<!-- begin: desktop.html.tpl -->
<!DOCTYPE html>
<html>
<head>
<title>FooBar</title>
</head>
<body>
<p>This is FooBar</p>
</body>
</html>
<!-- end: desktop.html.tpl -->
<!-- generation time: 32.446ms -->
The expected result should be exactly this source.
you need to use
$("html").html()
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned.Detail
or
document.documentElement.outerHTML
Demo
Related
I was working with the following tutorial of D3.js: https://www.tutorialspoint.com/d3js/index.htm.
My issue is as follows:
I'm aware of that the location inside the HTML is at the end of the . I mean, I usually put it here:
<body>
<!-- HTML code -->
<script>
<!-- JS code or external JS link -->
</script>
</body>
With this practice, what I'm looking is to run JS after the HTML content renders.
But! When I follow this practice using D3.js, what I discover is that D3.js renders what I add (using d3("html").append(something to append), after the script tags.
For example!
<!DOCTYPE html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>
</body>
</html>
I'm getting the content as follows:
<!DOCTYPE html>
<html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>`
</body><p>I get this text after the script tags</p></html>
Questions!
Is the position of the tag correct?
Is there a possibility to keep the flow without adding a to anchor the expected new tag?
Thanks!!!
You can use selection.insert() to insert an element instead of appending it to the DOM. The second argument to that method determines where the newly created element is put into the DOM tree. If you just want to put it in front of the first <script> element you can do something like:
d3.select("body").insert("p", "script") // <-- insert before first <script>
If you need to place it after the <div>, no matter what the next element might look like, you can use the adjacent sibling combinator to select the sibling element directly following the <div> like so:
d3.select("body").insert("p", "div + *") // <-- insert before next element following div
i'd like to isolate the javascript code from the html code in two diferent files, originally I had this code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="body">HTML Text</p>
</body>
</html>
<script>
$(document).ready(function () {
$("#body").text("JS Text");
});
</script>
and the output of the <-p-> was the expected "JS Text".
Then I tried to isolate the js script to another file (script.js):
window.onload = function(){
var text = document.getElementById('body');
text.innerHTML ='JS Text';
}
I've also make the reference at the html file:
<script type="text/javascript"src="scripts.js"></script>
but then the output text is no longer the expected (JS Text) but (HTML text)
what else do I need to make the js script work again?
First, it is invalid to place anything after the closing HTML tag, so while your first bit of code worked, it was invalid.
If you remove the JavaScript and place it in its own file, it will continue to work as long as you reference the file properly (use a relative reference and test the file on a web server) and place the script element just prior to the closing body tag so that when the script is processed and attempts to find the right DOM element, the DOM will have been loaded at that time.
FYI:
If you have JQuery in the referenced script file, then your
script that references JQuery will need to occur in the HTML prior
to the script that uses it.
The type attribute in the script tag has not been needed in
several years.
It's not a good idea to name anything body so that you won't cause
confusion with the body element.
Don't use .innerHTML when the string you are working with doesn't
contain any HTML. .innerHTML has security and performance
implications. Use .textContent instead.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="body">HTML Text</p>
<script src="relativePathToFile.js"></script>
</body>
</html>
Is it possible to create your own text contents (text between the HTML tags) of my custom HTML tags?
I used this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("eg").replaceWith("<h2>Put the text content of eg here</h2>");
});
</script>
</head>
<body>
<eg>My text</eg>
</body>
</html>
Between the <h2> tags (don’t think I should only use <h2> tags without JS) in my JavaScript code, any text can be placed that I like to have.
Example: <eg>I can type any text here but it’ll be still in h2 tag settings</eg>.
What should I write between <eg></eg> in JS to have any <h2> text content that will be written in my HTML code?
If you want to replace the <eg>Test</eg> with <h2>Test</h2> then you can just do this: $("eg").replaceWith("<h2>" + $("eg").html() + "</h2>");.
Here is an example: http://plnkr.co/edit/urd69pJSXQngGIsYYSjq
If I'm understanding correctly, you just want to append an element to the DOM, so you can just use the html method as follows:
$("eg").html("<h2>Any text can be placed here</h2>");
Have a look at the docs if you need more info.
Note: You closed but didn't open your body tag.
Replace:
</body>
With something like:
<body> <eg> Your custom content is between body tags now </eg> </body>
And you also have two HTML tags, remove the second
<html>
No. It wouldn't be HTML anymore.
However, if you wrote xHTML (which is a form of XML), then you could extend the DOM with your own elements. But that would be XML, not HTML.
And if you tried adding custom elements to a page, browsers wouldn't know what to do with them. Even if some browsers might display them, it's a very bad idea. Use a class name instead.
Creating and using custom tags is a bad idea. It should be avoided.
You are probably looking for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#my_h2").html("<h2>Any text can be placed here</h2>");
});
</script>
</head>
<h2 id="my_h2"></h2>
</body>
</html>
For more, read-up on CSS selectors. (They are the same as jQuery selectors.)
Hope this helps.
I am needing to open an html page on server-A and grab some values from server-B's webpage. In other words I want to display server-B's webpage values on server-A's webpage.
The webpage (server-B) data I need the values from is being populated by a source that I do not have access. The values are written into what appears to be a variable that looks like this: [[0]]. When the page is accessed that value [[0]] is populated with current data.
I have unsuccessfully tried to attach a label to the [[0]] to allow reading from server-A with a form post and get methods.
What should my approach be to move this data in [[0]] to server-A webpage?
Server-B page:
<html>
<!-- Head information for the page including page title -->
<head>
<title>Test</title>
</head>
<body color=#FFFFFF>
<!-- Start of your page body -->
<!-- This code displays the current tag value for index 0
[[0]] will be replaced by the tag value a the time the page is loaded -->
The value of the tag with index 0 is [[0]]
<!-- Added code to store [[0]] in div -->
<div class="pink-box" id="thatDiv">[[0]]</div>
</body>
</html>
I added this html/javascript for Server-A and I am getting the an error described with COR:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Div</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Div:</b>
<ol id="Result"></ol>
<script>
$("#Result").load("http://192.168.1.168/user/default.html #thatDiv");
</script>
</body>
</html>
You can get the contents of the HTML file and find the starting "[[" and the ending "]]" and grab the data in between.
<?php
$serverBFile = "http://www.serverB.com/file.html";
$serverBHTML = file_get_contents($serverBFile);
$serverBStart = stripos($serverBHTML,"[[");
$serverBEnd = stripos($serverBHTML,"]]");
$serverBLength = $serverBEnd - $serverBStart;
$serverBValue = substr($serverBHTML, $serverBStart, $serverBLength);
?>
The way that I have done this in the past is using DOM parsing tools like jQuery.
If you have access to a node.js server, you can use the jQuery plugin to load up server-B's webpage and then query something that's constant with the desired tag, be it ID, classname, tagname, location, etc.
<html>
<!-- Head information for the page including page title -->
<head>
<title>Test</title>
</head>
<body color=#FFFFFF>
<!-- Start of your page body -->
<!-- This code displays the current tag value for index 0
[[0]] will be replaced by the tag value a the time the page is loaded
let's say [[0]] becomes a <div>-->
<div class="pink-box" id="thatDiv">data I want</div>
</body>
</html>
From here, it's fairly easy to extract the text via $('#thatDiv').text() or $('.pink-box').text().
This is a fairly simple solution. Once you get that value into a variable in your node server, just expose a REST call that your server-a webpage can make an AJAX request to.
The reason I say to use node is because it seems that this page has dynamic content that must be loaded with JavaScript. If I knew more about how this page interacted, I would be able to give more specific solutions to your problem,
I'm sure this is a fairly basic question, but I'm relatively new to jQuery so was hoping someone might be able to help.
Basically, I need to load an HTML snippet into a page. This works fine when the snippet contains just HTML, but not when it contains a script.
I've stripped down my code to the bare minimum for clarity. This is index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
$('#banner').load('banner.html');
});
</script>
</body>
</html>
And banner.html contains just the following (as an example):
<h2>Subheading</h2>
<script>
document.write('Hello');
</script>
The script is executed, but for some reason it strips out the rest of the HTML in both index.html and banner.html (i.e. it just displays "Hello" and nothing else).
Any help greatly appreciated!
document.write after the page has load writes to the document, and at the same overwrites everything else currently in the document, that's why you end up with only the string "hello".
Just remove the document write :
<h2>Subheading</h2>
<p id="test"></p>
<script>
document.getElementById('test').innerHTML = 'hello';
</script>
that is becuase when banner.html is loaded .. the script inside banner.html get executed, which writes "hello" in your document(the document here is your entire index.html)
one way to understand this is by replacing certain content of banner.html rather than the whole document.
banner.html
<h2>Subheading</h2>
<div id="divID"></div>
<script>
$('#divID').html('hello'); //using jquery .. gets the element with id as divID and replace the HTML
</script>
here i am replacing just the div whose id is "divID" rather than replacing the enrite document