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
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:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
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