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>
Related
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");
This question already has answers here:
How to dynamically change CSS style attribute of DIV tag?
(4 answers)
Closed 1 year ago.
I have below html code,
<div id="one">
<div style="width:100%;height:auto;">
<div></div>
<div></div>
<div>
</div>
Code used:
let parentDivId = document.getElementById('one').children[0];
console.log(parentDivId);
In the above console only i am getting
<div style="width:100%;height:auto;">
<div></div>
<div></div>
<div>
How to get that first div style using pure java script?
Note: no need to add any id's in the the div's.the above html came dynamical
Need to get the first div with inline styles defined. Also i getting the above html inside a js variable.so document.query selector will not work.Please help me.
document.getElementsByTagName('div')[0].style.backgroundColor = 'RED';
The above code uses vanillaJS
The best way to get first nested div is like:
document.querySelector('div div')
Then you can assign styles to it like
document.querySelector('div div').style.color = #fff
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:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Here I have an example:
$('#key').on('click', function(){
$('.task').html("<button id='key'>Button</button>"+Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
</div>
How I can apply javascript for overwriting element and get different time for each button press?
Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.
$('#key').on('click', function(){
$('.datestr').html(Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
<span class='datestr'></span>
</div>
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!