This question already has answers here:
How to add class using jQuery?
(4 answers)
Closed 1 year ago.
Given the following html:
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message-error"></div>
</form>
</div>
Is there an easy way to reference the element of class "form__message" ? I know this is the only element of this class in this example, but potentially there could be more. So I was trying the following to remove the form__message-error CSS-properties:
$("#login .form__message").classList.add("form__message--error");
This, however, does not find the correct element, whereas the following works:
document.querySelector("#login").querySelector(".form__message").classList.remove("form__message--error");
I am looking for a jQuery alternative to the last statement.
You're mixing jQuery and DOM methods. The jQuery equivalent of .classList.add() is .addClass().
$("#login .form__message").addClass("form__message--error");
You don't need .find() with querySelector(), you can use the same selector as with jQuery:
document.querySelector("#login .form__message").classList.add("form__message--error");
Related
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 5 years ago.
I want to know what javascript code I can use to edit the text of this word?
This is not a duplicate because this has multiple divs in a div. And the target word is located in a div that is inside the more divs.
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
It's the 1st element that has this class...
document.getElementsByClassName('word')[0].innerHTML='Goodbye';
It's the 5th element that has this tag...
document.getElementsByTagName('div')[4].innerHTML='Goodbye';
You can use next code:
document.querySelector('.word').textContent = 'Hello World!';
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
But if you has few elements with class word, function 'querySelectror fining only first element'.If you need get many elements, you can use document.querySelectorAll --- is HTMLCollection (not array).
I don't recommend to use getElementByClassName - is very slowly method.
Method getElementsByTagName -faster that querySelectorAll , but it use only tagName. getElementById -is the fastest menthod finding of elements.
But that method find only first element with current ID.
This question already has answers here:
Replace Div with another Div
(3 answers)
Closed 6 years ago.
I need a simple solution for replacing a div with a new div, cross-browser compatible using javascript or JQuery. I'll add some code below. Div "myDiv-B" needs to be replaced by a new div:
<div id="myDiv-C">{% include 'snippets/contactpaneel.rain' %}</div>
Here are my divs
<div id="myDiv-A">
<div id="myDiv-B"></div>
</div>
You should use .replaceWith() method.
.replaceWith method replace each element in the set of matched
elements.
$('#myDiv-B').replaceWith('<div>Hello</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv-A">
<div id="myDiv-B"></div>
</div>
This question already has answers here:
jQuery click function only works on first element
(8 answers)
Closed 8 years ago.
I have a div containing other div elements which all contain an anchor tag that runs a javascrip function (uses AJAX to delete a row from a table). Example;
<div id="container">
<div><a id="btn" onclick="SomeFunction()">Delete</a></div>
<div><a id="btn" onclick="SomeFunction()">Delete</a></div>
<div><a id="btn" onclick="SomeFunction()">Delete</a></div>
... and so on
</div>
I then have this Jquery code;
$("#btn").click(function() {
$(this).parent("div").fadeOut();
});
that should fade out each of the elements on click to my knowledge, but it's only fading out the first element, if i click the next elements button's nothing happens.
I don't have extensive JQuery knowledge to understand why this is happening.
Ids must be unique, use classes instead.
Ids
[...] elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.
classes
Classes allows CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method
Reference
Example
HTML:
<div id="container">
<div><a class="btn" onclick="SomeFunction()">Delete</a></div>
<div><a class="btn" onclick="SomeFunction()">Delete</a></div>
<div><a class="btn" onclick="SomeFunction()">Delete</a></div>
</div>
jQuery:
$(".btn").click(function() // Identify classes by a dot and the class attribute value.
{
$(this).parent("div").fadeOut();
});
Working Demo
Offtopic: I recommend taking a look at .on().
You can only have one element on a page with the same id. jQuery is getting confused. Use class or attribute selectors instead.
This question already has answers here:
How to wrap an existing element with another one in jQuery?
(5 answers)
Closed 8 years ago.
I was wondering was it possible to append an element using jquery to be a parent.
Imagine I had this on my page:
<div id="inner">
</div>
And I wanted to put #inner inside another div #outer with jquery after some kind of event.
The result would be:
<div id="outer"> - This element was appended with JQUERY
<div id="inner">
</div>
</div>
Not sure that this is possible. Any help appreciated.
see this http://api.jquery.com/wrap/
$('#inner').wrap('<div id="outer"></div>')
$('#inner').wrap('<div id="outer"></div');
should do it.
what you need is the wrap function:
$('#inner').wrap('<div id="outer"></div>');
$('#inner').before(' - this element was appended with jQuery');
The wrap function should do the trick :)
var mkup = '<div id="outer"></div>';
$('#inner').wrap('<div id="outer"></div');
It is definitely possible in jQuery.
Please have a look on the jQuery API -> .wrap():
http://api.jquery.com/wrap/
$("#inner").wrap('<div id="outer" style="background-color: #ddd"></div>');
Example:
http://jsfiddle.net/QL79C/1/
Hope this helps!
This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 9 years ago.
I was trying to get the entire HTML of an element using jQuery. Of course, .html() grabs only the inner HTML, but I wanted to retrieve the wrapping HTML too.
Imagine the following HTML:
<div id="wrapper">
<div id="container_a">
<p>Container A</p>
</div>
<div id="container_b">
<p>Container B</p>
</div>
</div>
Now, If I would do $("#container_a").html() I'd get <p>Container A</p> clearly. However, I want to get the following:
<div id="container_a">
<p>Container A</p>
</div>
How would I achieve this?
You can do this using prop:
$("#container_a").prop('outerHTML');
FIDDLE DEMO
use outerHTML
$("#container_a")[0].outerHTML
using plain javascript
document.getElementById("container_a").outerHTML;
First use clone for temporary then get html
$('div').append($('#container_a').clone()).html();
This should work
<script>
var a=document.getElementById("container_a").outerHTML;
alert(a);
</script>
Instead of alert we may use variable a in any other way...
use outerHTML
$("#container_a")[0].outerHTML
Demo ---> http://jsfiddle.net/uBDHY/1/
https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML
you can use .outerHTML for this
$("#container_a")[0].outerHTML