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
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 last year.
Improve this question
I want to hide by the class and the name attribute in div
This wont work
$("div.ind_post").find("[name^='1']").hide();
This work
$("div.ind_post").hide();
$("div").find("[name^='1']").hide();
I wonder why i can hide by the element with class, or the name, but i cannot hide with class and name both.
so my question is how to hide within the class, by a specify name, thanks!
find searches descendants
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You should do
$("div.ind_post[name^='1']").hide();
I suspect the reason why $("div").find("[name^='1']").hide(); worked is that you had some div element higher up in the DOM hierarchy
Keeping in mind that name attributes are not allowed on div elements.
find searches the descendants of the selected elements.
If you want an element which matches a class selector and an attribute selector then you need to either search for them together in the first place:
$("div.ind_post[name^='1']")
or filter the collection of matched elements on the extra rule
$("div.ind_post").filter("[name^='1']").hide();
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 1 year ago.
Improve this question
I am needing to add what looks like an attribute into a div but I am not able to use the attribute tag because it has invalid characters. I can target the div by using
var ele = document.getElementById('divid');
But I then need to insert into the div tag a variable like this:
var topic = 'topic-Close=SCENARIO_COPIER_POPUP_CLOSE '
So I am wanting the div to look like
<div id="divid" topic-Close=SCENARIO_COPIER_POPUP_CLOSE> CONTENT OF DIV </div>
I am unable to use ele.setAttribute because of the invalid characters in the variable. Is there another way to add something to the DOM of a div dynamically that has invalid characters for an attribute tag?
You've said you can't, but you can add the attribute defined in that string via setAttribute:
var ele = document.getElementById('divid');
var topic = 'topic-Close=SCENARIO_COPIER_POPUP_CLOSE ';
const [name, value] = topic.split("=", 2);
ele.setAttribute(name, value);
console.log(ele.outerHTML);
<div id="divid"></div>
Note that:
It's an invalid attribute. The spec doesn't define it, and custom attributes must start with data-.
Attribute names are not case-sensitive in HTML, so the browser may normalize it (for instance, Chrome shows it in lower case).
Use data-attrName format for attribute name
ele.setAttribute("data-topic-Close", "SCENARIO_COPIER_POPUP_CLOSE")
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 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 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);