CODEWITHSUNDEEP
javascriptjqueryinnerhtml
Delgan
Delgan

Reputation: 19617

How to get the parent element too with getElementByClassName?

I have certainly extremely simple problem and I'm a little ashamed of not being able to solve it by myself.

HTML:

<div>
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>2</li>
    </ul>
</div>


JavaScript:

var tests = document.getElementsByClassName('test')[0].innerHTML;
alert(tests);


jsFiddle:

Try it

Currently, the result shows me <li>1</li>.

This is not what I want. I want the result to be <ul class="test"><li>1</li></ul>.

I tried using .parent() (I can use jQuery) but it gives me all <ul> tag while I just want the first. I also know that I could use some .split() but it is surely not the adviced way.

I thought the problem might be coming from the .innerHTML, there is a function that would allow me to recover also the target element, and not just his children?

Upvotes: 0

Views: 292

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

Just use outerHTML instead of innerHTML

var tests = document.getElementsByClassName('test')[0].outerHTML

Check Fiddle

You can do the same with jQuery. $.each to iterate over the elements and then use this so that it only points to that elements instead of all the elements with that class

jQuery

var $tests = $('.test');

$tests.each(function() {
    console.log(this.outerHTML)
});

jQuery Fiddle

Upvotes: 3

Related Questions