I want to get content of script tag example
now see above in src property load bolo7.com content i want to catch that contain
i have try so many method but it doesn't work
try 1 -> document.getElementById("data").innerHTML; //doesn't work
try2 -> document.getElementById("data").text; //doesn't work
if you are intelligent in javascript please give me answer that how to get content of script inside content
thanks in advance for your answer
my website is : http://www.bolo7.com/
The text property defined by the HTMLScriptElement interface is the text content of the script element. If the element uses a src attribute, it should not have any content so its text property will be an empty string.
In that case, you will need to access the src some other way, perhaps XMLHttpRequest will suit.
Note also that the id attribute for script elements is not valid for the DOCTYPE being used at the linked resource (and the document is invalid).
Something like this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//some data here
function add1(x) {
return 1 + x;
}
</script>
<script type="text/javascript">
alert(document.getElementsByTagName("script")[0].innerHTML);
</script>
</head>
<body>
</body>
</html>
but RobG is right, only works for inline javascript.
Related
In my project i have a javascript file that contain a variable like this one:
var htmlcode = "<html><body><h1>My First Web Page</h1><p>My first paragraph.</p></body></html>"
i would to know if in javascript exist a command for render my htmlcode variable ina real html page, i think to use a button for open that page.
So many thanks in advance
Using jQuery, you can use $('html') to select the HTML tag, and change its content using $('html').html("some new content"):
$("#changeHTML").click(function() {
$('html').html("<body><div style='color:red;'>New sample text</div></body>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
Sample text
<button id="changeHTML">Click me</button>
</body>
</html>
Using plain Javascript, you can use document.documentElement to select the document's HTML tag (source), and changing this variable's innerHTML should do the trick.
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>
Using the code below, I am successfully getting the jQuery.load to pull the external element's html into the div ("tnc-import"), but according the console, the newElementHeight variable just returns the init information of the element (init [prevObject: init(1), context: document, selector: "div#tnc-import > div#tnc"]) instead of actually getting the true-height attribute of the external element.
The source document includes the text to be imported inside <div id="tnc">...</div>. The target document includes...
<div>
<iframe id="iframe" src="/bin/tnc-import" frameborder="0" scrolling="no"></iframe>
</div>`
The intermediary document doing the importing and formatting is...
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
</head>
<body>
<div id="tnc-import"></div>
</body>
<foot>
<script type='text/javascript'>
$("#tnc-import").load( "../terms-and-conditions #tnc" );
var newElementHeight = $("div#tnc-import > div#tnc").height(true);
console.log(newElementHeight);
$('#iframe', window.parent.document).width('100%');
$('#iframe', window.parent.document).height(newElementHeight);
</script>
</foot>
</html>
The reason why I'm trying this is that all attempts to get the height, clientHeight, offsetHeight, etc of the jQuery-loaded element always result in "0". I've literally spent more than 12 hours troubleshooting with Google on this one objective, but with no positive result. Perhaps there is something wrong with that script that I've just not noticed... Either way, neither method or any variation that I've tried has worked.
Here is one of the old method variants that I was trying...
<script type='text/javascript'>
$('#iframe', window.parent.document).width('100%');
$('#iframe', window.parent.document).height($("div").outerHeight() + 10);
</script>
According to the documentation of jQuery, .height() does not accept any arguments with Boolean parameters, try removing true from the function to receive height in newElementHeight element.
Reference :http://api.jquery.com/height/
I don't know how to declare a variable here in javascript. I have an example situation that if the paragraph is equals to a, the alert will popup.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="sample">a</p>
</body>
</html>
<script type="text/javascript">
var sample = getElementById('sample');
if (sample == "a") {
alert("Correct")
};
</script>
You're declaring your variable just fine, however if you want the text within the element, you also need to use the innerHTML property. And when you use the getElementById method, you need to use it on the document object like document.getElementById:
var sample = document.getElementById('sample');
if (sample.innerHTML == "a") {
alert("Correct")
};
<p id="sample">a</p>
sample is a variable and you are correct but it is storing a reference to a DOM Element with id sample. To get the inner html of that you need
var sample = getElementById('sample').innerHTML;
Also, use === over == for no casting etc. Refer here
I will recommend you to have a quick look at JS from w3schools and then move to MDN. Nobody will report you here if you show your efforts, so relax :).
Your declaration is fine, but the assignment part is missing document as the object which has the .getElementById method. Then, once you have the reference to the element, you then need to access its content with .textContent (you can't compare the entire element to a value that the element might contain). As a side note on this, when the string you wish to set/get doesn't contain any HTML, you should use .textContent so that the browser doesn't parse the string for HTML unnecessarily. Often, people will suggest that the content of an element should be gotten/set using .innerHTML and, while that will work, it's wasteful if the string doesn't contain any HTML.
Also, the <script> must be located within the head or the body, not outside of them. I would suggest placing it just prior to the closing body tag so that by the time the processing reaches the script, all of the HTML elements have been parsed into memory and are available.
Lastly (and this is really just a side point), an HTML page also needs the title element to have something in it, otherwise it won't be valid. While browsers don't actually do HTML validation, it's important to strive for valid HTML so that you can be sure that your pages will work consistently across all devices. You can validate your HTML at: http://validator.w3.org.
<!DOCTYPE html>
<html>
<head>
<title>Something Here</title>
</head>
<body>
<p id="sample">a</p>
<script type="text/javascript">
var sample = document.getElementById('sample');
if (sample.textContent == "a") {
alert("Correct")
};
</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.