This question already has answers here:
What are alternatives to document.write?
(11 answers)
Document.write function replaces the whole page with the text
(2 answers)
Closed 5 years ago.
Whenever i tried using document.write it replaces the current html page content in example i have this HTML
<body>
<div>
<h1>Hello</h1>
</div>
and this jQuery
var notif = document.write("<div class = 'bg' style = 'height:250px; width:400px; z-index:10; background:red;'>Good Morning!</div>");
$('body').append(notif).delay(5000).fadeOut()
this replace the whole page big Hello will be gone
the jQuery will work after a 5 seconds it disappears then displays nothing?
document.write is not needed for 'append' (document.write writes the content to the page replacing the existing content fully). Pls see the documentation for jquery append: http://api.jquery.com/append/
You'll have to just write
var notif = "<div class = 'bg' style = 'height:250px; width:400px; z-
index:10; background:red;'>Good Morning!</div>";
$('body').append(notif).delay(5000).fadeOut()
Related
This question already has answers here:
Adding text to an existing text element in JavaScript via DOM
(7 answers)
Closed 3 years ago.
I need to make a dynamic row counter for my table. I do this with a span but how do i run my javascript function on it so it prints the number out?
html;
<span id="Tellen"></span>
Javascript;
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
}
Could someone help me into the right direction, much appreciated.
You didn't assign output to html span
Try this Tag :
<span id="Tellen"></span>
JS
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
document.getElementById('Tellen').innerText = rowCount
}
But you need some event to call tellen() .. It can be onClick of button or something like this
This question already has answers here:
Creating multiline strings in JavaScript
(43 answers)
Closed 7 years ago.
I need to generate 185 lines of html on a web page when the user clicks on a button and I want to declare the html code as a multiple lines on a variable but I 've problems with the html code on a variable, I tried several ways researching on the web but I couldn't achieve it.
For example:
<script type="javascript">
//it doesn't work
var html = " <li> <!-- 185 lines of html --> </li>";
</script>
Using Heredoc (I thought heredoc notation doesn't work on Javascript -???-) notation seems that works but the javascript contained on the html shows an error.
I really appreciate any help.
You can do something like this:
document.getElementById('button').onclick = function(){
var eleContainer = document.getElementById('container'), //The parent of the of the elements
html = '', //Will be filled with html lines
repeats = 128; //You can change it as much as you want
for(var i=0; i<repeats; i++){
html += '<li></li>';
}
eleContainer.innerHTML = html;
}
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
I am trying to replace some text in a DIV tag using JavaScript, but the tag only has a class not an ID. I have tried:
document.getElementByClassName('theClassName').innerHTML = 'text i want to insert in place of the existing text';
This has not worked, I also tried the above but using getElementById but that didn't work either.
UPDATE:
I think I need to explain more (sorry im a n00b coder). What I am doing is loading a website into a WKWebView using Swift, I am then injecting a .JS file at the end of the page loaded. Within that .JS file I am then trying to do the above with no success. I can find a DIV and hide it so far but being able to replace the text is proving hard.
Here is what I tried last but this did not work either:
var classes = document.getElementsByClassName("title-random");
for(var i=0;i<classes.length; i++) {
if(classes[i].innerHTML == "The old text") {
classes[i].innerHTML = "the new text";
break;
}
}
I have even tried generic "find this text" and replace it code but with no effect
Hi if u have the class on several divs u have to access via array like this:
<!DOCTYPE html>
<html>
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 7 years ago.
I googled my fingers wound and all the solutions I found won't work.
Im trying to replace a div like the following:
var modal = document.getElementById("first");
// Get modal content and replace the footer with content
var oldContent = modal.innerHTML;
// Set modal content
modal.innerHTML = oldContent.replace(/<div class="two">(.*?)<\/div>/, '<div class="two">' + 'Content' + '</div>');
<div class="outer" id="first">
<div class="one">This is the first one</div>
<div class="two">Second one</div>
</div>
Im trying to replace everything in the second div.
Currently my code is like this and I tried so select everything with regex, but it just wont work.
You could be using querySelector for what you need:
document.querySelector('div.two').innerHTML = 'Content';
Makes no sense to change content with a regular expression when you can access the element. Explained here on why it is bad idea.
Just reference the element from the modal and set the innerHTML or textContent with the value you want.
modal.getElementsByClassName("two")[0].innerHTML = "new text";
or
modal.querySelector(".two").innerHTML = "new text";
This question already has answers here:
JavaScript DOM remove element
(4 answers)
Remove element by id
(19 answers)
Closed 8 years ago.
I'm using this widget/snippet:
<div class="tbnet-gadget">
<div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
<script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>
This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.
I want to still use this widget, but I'm trying to remove that link from the bottom of it.
I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.
This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/
How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?
Thanks.
http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh
How about just using CSS instead:
#tbnet-link{
display: none !important;
}
JSFiddle
Here is the non-CSS version (which is a bit ridiculous):
You can remove this:
<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
If you add this jQuery and remove the script in your html:
$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
$("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
});
JSFiddle no-CSS
To remove the element:
var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);
To just clear the text:
var el = document.getElementById("tbnet-link");
el.innerHTML = ""
If you're up for jQuery, it's really easy:
$(function(){
$("#tbnet-link").remove();
});