This question already has answers here:
innerHTML not working javascript
(2 answers)
Closed 7 years ago.
I am trying to use javascript to dynamically change the header to my website and thus the header was not changing. My html, for simplicity, looks like
<div class="container">
<h1 id="name">Nic</h1&g
<p id="email"></p>
<hr>
</div>
<script src="js/something.js"></script>
My javascript lives in a file called something.js and looks like
$(document).ready(function() {
console.log('I got run');
$('#name').innerHTML = "YO";
$('#email').innerHTML = "why hello";
})
For some reason I see the log in the console but the html never changes. Why is the header not getting changed?
I did try looking at the stack overflow question
Javascript: Does not change the div innerHTML
and here Setting innerHTML: Why won't it update the DOM? and many others however none of them address my issue.
In jQuery you use .html("text") instead of .innerHTML
$(document).ready(function() {
console.log('I got run');
$('#name').html("YO");
$('#email').html("why hello");
})
Jquery doesn't have innerHTML property to set html instead it has method.
Use .text() if your content is only plain text
Like this
$('#name').text("YO");
If it has html content then use .html()
Like this
$('#name').html("<p>YO</p>");
DEMO
Related
This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Closed 5 years ago.
I am doing a simple hover scrollbar project. I want to change the height of thumb when someone change the contents in html tag by prepend(),append(),html()..etc. how can I do this? I googled it and found answers like
$('.class').html('value').trigger(somefunction())
But it is not the answer. Because I am not the developer of other js codes. I want to do this with only my script file.
here is my project :-
https://github.com/rameshkithsiri/hoverscroll
Here is way of doing so , you can use DOMSubtreeModified events. But look out It before using it.
$("body").on('DOMSubtreeModified', ".myCLASS", function() {
alert($(this).html());
});
setTimeout(function(){ $(".myCLASS").html("my Test") }, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myCLASS"></div>
This question already has answers here:
How can I change div content with JavaScript?
(6 answers)
Closed 7 years ago.
How do i change the content of an div on an website that has an id with javascript?
<div class="chat-area" id="chat-area">[Changeable]</div>
I want to know how i add content where it says "[Changeable]" with javascript so i can run the command through the console.
I'd like if you keep your explainage simple, because im still very new to html/css/javascript ;)
In very simple JavaScript terms, you can use:
document.getElementById("chat-area").innerHTML = 'New Content';
And yes, this would work in GreaseMonkey / UserScripts too!
You can use the innerHTML property to achieve your goal like so:
document.getElementById("chat-area").innerHTML = "Your new content here";
This question already has answers here:
How to reset a form using jQuery with .reset() method
(16 answers)
Closed 8 years ago.
I KNOW this question has been asked numerous times as I have used this website's solutions to no avail. I currently have this implementation:
$("input:reset").click(function () {
$('#answer_2').html('License number is not long enough');
$('#answer_1').html('');
$('#data_entry').each (function(){
this.reset();
});
});
I know the selector is correct as the two html changes (I put them in to confirm I was selector for the reset button click correctly) occur as they should.
Here is my form declaration:
<form name="data_entry" id="data_entry" method="post" action="">
The problem is I keep getting the error that there is no 'reset' function and the form is never cleared. This is my most recent attempt at following answers to this problem on stackoverflow site. Please help.
Why reset when you want to clear/empty?
this.empty();
might do the trick?
Your each is wrong and it's unnecessary.
$('#data_entry').get(0).reset();
This should work because you got the right element but $() returns a jQuery object, not a DOM element. get will grab your DOM element and then you can use reset() (which is not a jQuery function)
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Convert tags to html entities
I am building a snippets area to a friend's site, and i need to know how to convert html tags to normal text so the page will show the tags.
Like here in the code:
<img>
so the tag will be seen and not become to a normal html tag,
And all this using javascript or jQuery.
What I got now is something like that:
<pre><code>THE USERS CODE</code></pre>
and it still hide the html tags and make them active.
thx :)
You could use
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
SOURCE: http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/
Use Jquery and instead of $('something').html() use $('something').text() checkout http://api.jquery.com/text/
This question already has answers here:
Can I create script tag by jQuery?
(5 answers)
Closed 9 years ago.
Is it possible to get JavaScript script tags inside jQuery .html() function?
function pleaseWork(){
$('#content').html('<h3 style="color:#335c91">This is the header</h3><div class="holder"><script type="text/javascript" src="javascriptFile.js"></script></div>');
}
What I am trying to accomplish is when the user clicks on a button, this header and JavaScript code show up in the div content, right now when I click on the button, there is no header showing and it goes to a blank page and shows the JavaScript code (it works, but not how I would like it to work.)
Escape the </script> tag, by replacing it with this: <\/script>
If that doesn't work, also surround the script with cdata tags.
Working demo: http://jsfiddle.net/BgxZN/1/
EDIT:
If you want to actually show the contents of the javascript file inside the div, you'll need to use an XMLHTTP request or an iframe.
New working demo: http://jsfiddle.net/BgxZN/13/