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
Related
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.
In order to understand my question look at the following example code:
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>
$('#object') works always!
document.getElementById("object") will work if I change the DOM structure before?
$('#there').append( $('#object') );
document.getElementById("object") // will work?
Yes, it will work.
For getElementById to return DOM of element there is only need and that is Element should be on document it dosen't matter where it is.
It will work. See this code.
jQuery is not a language, it is just a JavaScript plugin and it make use of available functions in JavaScript.
console.log($('#object')[0]);
console.log(document.getElementById("object"));
$('#there').append( $('#object') );
console.log(document.getElementById("object"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I'm stumped and need some help. I am trying to implement some responsive code, upon implementation, I had to re-jigger some code to make it work. One being getting the ID from a table element.
The HTML I have so far:
<div class="title">blah</div>
<table id="Sailing%20Monohull" class="responsive">
<!-- contents -->
</table>
When you go responsive, the HTML changes, like so:
<div class="title">blah</div>
<div class="table-wrapper">
<div class="scrollable">
<table id="Sailing%20Monohull" class="responsive">
<!-- contents -->
</table>
</div>
<div class="pinned">
<table id="Sailing%20Monohull" class="responsive">
<!-- contents -->
</table>
</div>
</div>
This is repeated 3 times. When responsive, I want to get the table ID, example "Sailing%20Monohull"
I have tried in Chrome's console:
$(".title").each(function(index, element) {
console.log($(this).next().find('.scrollable').children().attr('id'));
});
and I got the desired results. but when I put it in my file, upload it and run it, I get undefined and I don't know why. I am open to any ideas. Thanks in advance
Your table id is not a valid identifier. Do not use special characters, except for _. Use number or characters.
Try this
$(".title").each(function(index, element) {
console.log($(this).next("div").find('.scrollable').find("table").attr("id"));
});
JS Fiddle
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!