如何使用getElementsByClassName获取父元素？

Question

我当然有一个非常简单的问题，我有点惭愧自己无法解决这个问题。

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

目前，结果显示<li>1</li>。

这不是我想要的。我希望结果为<ul class="test"><li>1</li></ul>。

我尝试使用.parent()（我可以使用jQuery），但它只给我所有<ul>标记，而我只想要第一个。我也知道我可以使用一些.split()，但肯定不是建议的方式。

我认为问题可能来自.innerHTML，有一个功能可以让我恢复目标元素，而不仅仅是他的孩子？

Answer 1

只需使用outerHTML代替innerHTML

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

<强> Check Fiddle

你可以用jQuery做同样的事情。 $.each迭代元素，然后使用this，以便它只指向那些元素，而不是指向该类的所有元素

<强>的jQuery

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

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

<强> jQuery Fiddle