This question already has answers here:
Change content of a div using JavaScript
(4 answers)
Closed 9 years ago.
document.getElementById("txtOutput").value = result;
instead of using .value=result, can I write something else to say, rewrite to a specific div or paragraph?
If you want to write something (including html-formatations) you can use innerHTML orherwise if you need only the text use innerText:
innerHTML
document.getElementById("txtOutput").innerHTML = result
innerText
document.getElementById("txtOutput").innerText = result;
Yes you can. Look at this simple JsFiddle for an example.
HTML:
<div id="me">
<span>old stuff</span>
</div>
Script
document.getElementById('me').innerHTML = "new stuff";
you can use innerHTML:
document.getElementById("txtOutput").innerHTML = 'some content';
Related
This question already has answers here:
Change tag using javascript [duplicate]
(6 answers)
Closed 2 years ago.
In JavaScript, I would like to simply change the
<section class="row"> to <div class="row">
Preferably in the least amount of code as possible to keep it simple :) I was using document.querySelector but that is as far as I got. Thank you for your help!!
You could try
const newDiv = document.createElement('div');
const oldSection = document.querySelector('section.row');
newDiv.innerHTML = oldSection.innerHTML;
newDiv.className = 'row';
oldSection.replaceWith(newDiv);
This question already has answers here:
How can I change an element's text without changing its child elements?
(16 answers)
Closed 1 year ago.
I have next html:
<label for="user_name">
<abbr title="required">*</abbr>
Name
</label>
And I want to change label caption to Title with jquery. So I do
$('label[for=user_name]').html('Title')
And it replaces all inner html (including abbr tag)
So, what's the easiest way to replace only Name?
If you use contents() method it will also return text nodes. Since jQuery doesn't have text node methods, convert last node to a DOM node
$('label[for="user_name"]').contents().last()[0].textContent='Title';
Demo: http://jsfiddle.net/yPAST/1/
Sorry for the late reply... But here is a way to do so using only jQuery:
$('label').contents().last().replaceWith('Title');
It may not be the prettiest way, but this works:
var $label = $('label[for=user_name]');
$label.html($label.html().replace("Name", "Title"));
You can select only the abbr element, store it, and then replace the whole content with the stored element plus the changed caption:
$('label[for="user_name"]').each(function(){
var a = $(this).children('abbr');
$(this).html(a).append('Title');
});
See this fiddle
you can use replace accomplish this
var html = $('label[for=user_name]').html().replace('Name','Testing');
$('label[for=user_name]').html(html);
check it : http://jsfiddle.net/DyzMJ/
Evans solution added to jquery fn to make it's use comfortable:
// get/change node content not children
jQuery.fn.content = function( n ){
var o = $(this).clone();
var c = o.children().remove();
if (typeof n === "string" ){
o.html(n);
$(this).html(c).append(n);
}
return o.html();
}
Usage :$('myselector').content('NewContentString');
This is the solution that worked for the most browsers
$('label[for="user_name"]').contents().last()[0].nodeValue = 'Title';
This one came close but gave issues in ie8 since textContent is not supported
$('label[for="user_name"]').contents().last()[0].textContent='Title';
if you are manipulating more than 1 label you can select each label and replace text with jquery:
$('label[for="user_name"]').contents().last().replaceWith("Title");
and for the second label :
$('label[for="user_lastname"]').contents().last().replaceWith("Title2");
and so on ...
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:
How do I select text nodes with jQuery?
(12 answers)
Closed 7 years ago.
Using Tampermonkey I want to reverse the text on the bbc news website (why? because), obviously this is locally only. I have already written something to replace a part of it, the problem is accessing all the text on the page. Is there an efficient way of doing this in JQuery?
e.g. I have a reverse() function, given:
<div>
Text1
<span class="...">Text2</a>
<fieldset>
<legend>Text3</legend>
Is there some way of targetting Text1, Text2 and Text3 without touching anything else? I can write something to explicitly check the tagName while traversing the DOM and hope there's a text type, or something similar, but I'm wondering if JQuery already has something for doing this?
thanks
Reverse away!
$('*').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
this.nodeValue = esrever.reverse(this.nodeValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mathiasbynens/esrever/master/src/esrever.js"></script>
<div>
Text1
<span class="...">Text2</a>
<fieldset>
<legend>Text3</legend>
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();
});