Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm making a chrome extension and trying to replace a certain word with another.
let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
element.innerHTML = element.innerHTML.split(word).join("████");
}
The above code edits src and srcset attributes as well.
element.innerText and element.Textcontent removes all the CSS from the webpage.
Unfortunaly inner/outerHTML are changing all child elements too what causes them to be re-rendered by the browser (even if not changed). this also means you may "replace" some text multiple times if your selector received elements from all levels and the replacement text contains the original text too.
So the proper way is to change just the text-elements without touching the child-elements. This way you will not experience any of the mentioned problems:
let word = "yourword"
let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
element.childNodes.forEach(function(el){
if (!el.nodeValue) return;
el.nodeValue = el.nodeValue.split(word).join("████");
});
});
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
the following function
<script>
function new_par()
{
var beginning="<input id=";
document.getElementById("debug").innerHTML=beginning;
}
</script>
produces no output, although if I remove the "<" sign, it does. Presumably the javascript avoids an output that would destroy the html page, but would there be anyway to force the output?
You're assigning it to a node's innerHTML property. When you plug the string into the DOM it's trying to parse it as though it were HTML. If you were to simply add it as a text node it would appear.
var beginning="<input id=''";
document.body.textContent = beginning;
https://jsfiddle.net/2patzyo1/
Edit: upon looking again at your question, if you are trying to get the input element to appear on the page, the string you're using isn't proper HTML because you never closed the tag. When the browser runs into it, it tries to parse and render it, but because it isn't valid it gives up. This will work:
var beginning="<input id=''>";
document.body.innerHTML = beginning;
https://jsfiddle.net/2patzyo1/1/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I am having a problem trying to change some innerHtml with this piece of code bellow:
var element = document.getElementByClass("productitemcell > a");
element.innerHTML = "Remover";
It is suposed to change the innerHTML from a link that says"Remove" to "Remover" and its not working.
Here's the page of it: http://ooleiro.businesscatalyst.com/OrderRetrievev2.aspx
You have to buy some products to access this shopping cart page.
I think you meant document.getElementsByClassName()
This method will return a HTMLCollection object. You can grab the first element like so:
var elements = document.getElementsByClassName('class');
var firstElement = elements[0];
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
The method is called getElementsByClassName (plural) and returns a collection of HTML elements. For which one of those do you want to change the HTML? For the first one?
Additionally, you cannot use a CSS selector like that in standard DOM methods
EDIT: Obviously you want to change all occurrences of a elements inside all occurrences of .productitemcell:
var pics = document.getElementsByClassName("productitemcell");
for(i=0; i<pics.length; i++) {
// loop over all elements with that class
var anchors = pics[i].getElementsByTagName("a");
for(j=0; j<anchors.length; j++) {
// loop over all anchor elements within the current class element
anchors[j].innerHTML = 'Remover';
}
}
Had to change the class to
var removerprod = document.getElementsByClassName("remover");
for(i=0; i<removerprod.length; i++) {
// loop over all elements with that class
var anchors = removerprod[i].getElementsByTagName("a");
for(j=0; j<anchors.length; j++) {
// loop over all anchor elements within the current class element
anchors[j].innerHTML = 'Remover';
}
}
so it doesnt change the product name as well. the only problem remaining is that it is retrieving with ajax and everytime it refreshes it changes again to "Remove"Thank's you devnul69, i realy learned a lot today about js.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have a JS variable like this:
var elmnts = $('#elm1, elm2, #elm3, #elm4')
how can i add and remove other html elements?
i try this code but there is no result.
elmnts.add('#elm5');
elmnts.remove('#elm1')
$.fn.add returns new collection, it doesn't modify original one. So you should use this syntax.
elmnts = elmnts.add('#elm5');
To remove element from a collection of jQuery objects you can use $.fn.not method:
elmnts = elmnts.not('#elm1');
You should not use remove for this, it's used to delete element from DOM tree.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a javascript string which contains a HTML code to be loaded into my app. The issue I am finding is that the string has a bunch of tags in the head tags which just displays as text at the top of the content. How can I remove all the content of the string bar whats between the two body tags?
E.g.
<html><head><meta>...</meta><style>...</style></head><body><div>...</div></body></html>
Needs changing to:
<div>...</div>
Thanks
You can use code below but you better change the service that returns html result.
var s = "<HTML><head><meta><head><body>YOUR HTML</body></html>"
var body = "<body>";
var bodyEnd = "</body>";
var res = s.substring(s.indexOf(body)+body.length,s.indexOf(bodyEnd));
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm currently learning HTML 5 + javascript, and one of the examples I'm looking at is written in JQuery. I realise that JQuery would be simpler to some people, but as I am just coming to terms with Javascript and no nothing of JQuery, I'm looking to get some lines of code translated from one to the other.
I know what these lines of code does, I'm just looking for it in JavaScript.
var showForm = function() {
if(editMode) {
var transaction = transactions[editMode];
amountField.value = transaction.amount;
if(transaction.type) $('[value='+transaction.type+']').attr('checked', 'true');
if(transaction.cleared) $('#cleared').attr('checked', 'true');
noteField.value = transaction.note;
dateField.value = transaction.date;
$('#time').val(transaction.time);
postcodeField.value = transaction.postcode;
searchField.value = ''
} else {
clearUI();
}
$('#formDiv').show();
$('#toolbar').hide();
$('#tableDiv').hide();
$('#map_div').hide();
$('#sum').hide();
Replace the lines where ever you select the element by ID with the corresponding ID
$('#cleared') ---> document.getElementById('cleared')
you can also use querySelector metod to access the element directly.
var cleared = document.querySelector('#cleared');
To show or hide a element you would need to set the style.display property
// To hide
cleared .style.display = "";
// To show
cleared .style.display = "block";
To get the element based on the attribute would be a bit of javascript..
$('[value='+transaction.type+']')
Where in you would need to iterate over each element and get the attribute of that element and then compare with the value.