Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am building a HTML site & that site has too many pages. So I want a code so that I can edit a particular div from my website so it will apply to all over in my website.
For eg.
In HTML >>
<div id="special-id"> I want to change or place anything [HTML code also] inside of this div with javascript </div>`*
& in javascript >>
<script type="text/javascript">
????
</script>
Please need help so that I can move to my HTML website again.
I want to change a content that may be simple text or a javascript code or HTML code?
document.getElementById('special-id').innerHTML = "Whatever you want to replace with";
The easy way:
first, get your element with e.g. getElementById, then set innerHTML to your new code.
var div = document.getElementById('special-id');
div.innerHTML = '<span>hello world</span>';
The DOM method only way:
create your new HTML nodes using document.createElement or document.createTextNode and then append them to your element with appendChild.
// assuming `div` as above
var newNode = document.createElement('span');
span.appendChild(
document.createTextNode('hello world')
);
div.appendChild(span);
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So I have made a plugin for my website using javascript, one line of the code is output.innerHTML = "Test";
Can I style this using CSS or is there another way?
Can I style this using CSS
Yes. Write a selector that matches the element you have a reference to in output.
Alternatively, add new elements inside it and write selectors that match them.
or is there another way?
Not anything sane.
you can write directly like this
output.innerHTML = "<p style='your styles'>Test</p>";
If you want to style the text which is appended to the output element, then either apply a CSS class or edit the style via javascript, for example by doing the following:
output.style.color = "#FF0000";
which would produce red text.
the html
<html>
<body>
<div id="output"></div>
</body>
</html>
and javascript
window.onload = function(){
var output = document.getElementById('output');
console.log(output);
output.innerHTML = "test";
output.style.color ="#ff0000";
};
will do the work. CODEPEN
Be noted to always use window.onload or $(document).ready(function(){}) for the jQuery equivalence to make sure that the DOM element has exist by the time your javascript code is being executed.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I am learning Javascript right now, and I under stand its all client side and does not store information like php. I also have seen spoiler codes and all the ones I have seen use jquery. When I use the word "Spoiler" I am referencing something you click to open information ( usually a plus sign) and then to remove the hidden information from view you click it again ( usually its a minus sign). I was wondering if it would be possible to create a spoiler just using Javascript and nothing else, and if it is possible a small example.
Yes it's entirely possible. You just need to access your events and elements through native javascript. If you can provide an example of what you're trying to do I can give you some better sample code to get the job done.
<head>
<script>
docReady = function() {
var spoilers = document.getElementsByName('spoiler');
for(var s = 0; s < spoilers.length; s++) {
spoilers[s].onclick = function(e) {
// Prevent the default link action
e.preventDefault();
// Show the parent element's next sibling
var spoilerText = this.parentNode.nextSibling;
spoilerText.style.display = 'block';
}
}
}
// Attach docReady function to DOMContentLoaded
// (Works in Firefox/Chrome/Safari)
document.addEventListener("DOMContentLoaded", docReady, false);
</script>
</head>
<body>
<div id="stories">
<p>This is the storySpoiler</p><
p style="display:none">Spoiler Text</p>
<p>This is the storySpoiler</p><
p style="display:none">Spoiler Text</p>
</div>
</body>
A quick point of advice: learn to use console.log, it will be your best friend with native javascript.
Also, if you're wondering why I broke the paragraph line after the opening bracket of the second paragraph it's an issue with the nextSibling method. For the sake of brevity I used simple javascript methods in the example. You can read about the nextSibling issue here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I need to get the element by class of "balls" from the div gameContent.
Basically grabbing the lottery numbers from Play4 from this site:
http://www.flalottery.com/play4.do
How can I get the element by class from another class? If I just do balls, all of the numbers show up, which aren't relevant and would mess up data.
Do you mean something like this:
document.getElementsByClassName('gameContent')[0].getElementsByClassName('balls')
Get elements by class "gameContent" followed by "balls". Query assumes that the first gameContent is what we are interested in.
Hope this helps.
you can use the following query selector
var elems = document.querySelectorAll(".gameContent .balls")
That is pure JavaScript. You can of course use the same query selector for jQuery
For instance with jQuery this would be
var elems = $(".gameContent .balls")
Notice how the query selector is identical.
Did you try
$(".gameContent .balls")
Judgeing by the page you've included in your question, you'll probably want to iterate through the <span> elements to get each ball number:
$('.gameContent .balls').each(function(){
alert('next ball: '+$(this).html())
});
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
Suppose the following markup:
<body>
link [ some text here
link [ some more text here
</body>
Is there anyway to use jQuery to remove the ' [ ' from the top line but not the bottom one?
Note: I don't have the access to the markup, but I can add elements, divs etc. using jQuery if I wanted to. BUT jQuery does not need to target the string of ' ] ' in particular - it can be something like "remove next 3 characters after uniqueLink1.
jQuery doesn't really help much with manipulating text nodes, but here it is:
var tn = $('a[name="uniqueLink1"]')[0].nextSibling;
tn.nodeValue = tn.nodeValue.replace('[', '');
Demo
$()[n] is a shorthand for $().get(n), so [0] will return a reference to the first matched DOM element inside the jQuery object, the uniqueLink1 anchor.
nextSibling, as the name implies, grabs the next sibling node. In this case, the text node that follows the given anchor element.
nodeValue gets and sets the content of the text node.
String.replace() given a string as the first argument replaces only the first occurrence, thus this should be enough enough given the DOM structure is similar to the posted one.
This will filter the textnodes, and remove a [ from the first on it finds:
var textNode = $('body').contents().filter(function() {
return this.nodeType == 3;
}).eq(1);
textNode.replaceWith(document.createTextNode(textNode[0].textContent.replace('[','')));
Example fiddle