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.
Related
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>
I am trying to run a javascript inside of a div tag because i have heard its possible but for some reason the code does nothing.
<!DOCTYPE html>
<html>
<body>
<title>XDSITE</title>
<br>
<br>
<div id=mycode style="BACKGROUND:
url('javascript:eval(window.alert("sometext"))'"></div>
</body>
</html>
You have some problems in your HTML it is not valid, you can't run JavaScript from a style attribute.
You can run Javascript from within a <script> tag which really is the best way to do it.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Alternatively there are some HTML elements that allow you to execute it on some events, like onchange, onclick etc.
<select onchange="myFunction()">
<button onclick="myFunction()">Click me</button>
https://www.w3schools.com/ is a great resource for learning more about each html element, and also JavaScript as a whole.
Good luck
can you please tell here which java script framework is you are using? you can achieve this by using and template java script framework like Angular, React...
If u dont want to use any framework than you need to write pure javascript or jquery code for assigning the background css prop.
for entire body,
document.body.style.backgroundImage = "url('img_tree.png')";
for div,
document.getElementById("mycode").style.backgroundImage = "url('img_tree.png')";
<!-- U have to give event inside expression like onclick ,mouseup Click that text -->
<div id=mycode onclick="alert('Hi ....sometext')">THARA
</div>
<!DOCTYPE html> <html> <body> <title>XDSITE</title> <br> <br> <div id=mycode style="BACKGROUND: url('javascript:eval(window.alert("sometext"))'"></div> </body> </html>
Answer :
Open script in footer
<script>
$( "#mycode" ).click(function() {
alert( "Hai" );
});
</script>
I hope its working for you ...
You can target HTML tag using getElementById() and then apply custom style like this
document.getElementById("Mydiv").style.backgroundColor="#0000"
or apply a bunch of styles like this
var dev = document.getElementById("Mydiv");
dev.style.backgroundColor="#0000";
dev.style.fontSize="..";
dev.style.backgroundImage="..";
You can run your function using "onerror" event. And also you must do some error in that case. For eg.
<img src="someFakeSrc" onerror='javascript:eval(window.alert("sometext"))'>
HTML doesn't see a src of picture then run a 'onerror' event.
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.
Using this code, I am trying to get the href attribute of a link and make a new link of that attribute. Why my link does not work, I don't know. It shows something like this:
404 - The page cannot be found
Sorry, we cannot find the page.
It might have been removed, had its name changed, or is temporarily
unavailable.
Please check that the Web site address is spelled correctly.
Or go to our home page, and use the menus to navigate to a specific
section.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
text ="";
text +=$("#w3s").attr("href");
document.getElementById("demo").innerHTML="<a href=\'text\'>W3Schools.com</a>";
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Show href Value</button>
<p id="demo"></p>
</body>
</html>
If I use:
document.getElementById("demo").innerHTML = text;
It shows http://www.w3schools.com. Why doesn't the link go to this site?
If you're going to use jQuery to traverse and manipulate the DOM, use jQuery. If you're going to use vanilla javascript... do that. Just try not mix them! Makes things easier in the long run. Anyway, you could do something like this to set the href attribute;
$('#demo').attr('href', text);
or
document.getElementById('demo').href = text;
btw this
"<a href=\'text\'>W3Schools.com</a>"
Is totally not how you do string concatenation in javascript. Should be
'W3Schools.com'
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.