CSS - 抓取元素并内联显示它们(绝对定位？)

Question

我有一个充满 DOM 元素的网页，我想从该页面中取出所有 h3 并将它们并排显示在页面顶部。问题是 - 这可能吗？

<h3>I want</h3>
    There are tons of other content between them so...
<h3>These headers</h3>
    Keep in mind the're separated by many DOM elements...
<h3>To be displayed</h3>
    Luckily no other h3s between them...
<h3>Inline next to</h3>
    Thank you for trying to help :)
<h3>Each other </h3>

这是 jsfiddle，我尝试使用绝对定位，但我很确定采用这种方式会很困难(边距):

http://jsfiddle.net/zLbuP/

我需要代码至少适用于 IE7 及以上版本，我不能使用任何 JS/jQuery(不过使用 jQuery 会很容易) 。当然我也无法编辑html本身。

有什么想法，或者不可能吗？ ;)

Answer 1

使用 jQuery/Javascript 很简单吗？

我只是乱搞了一下，想出了这个:http://jsfiddle.net/zLbuP/19/

代码只是从所有 H3 中获取内容，删除它们并创建一个新的组合 H3。

//When then DOM is ready
jQuery(document).ready(function($) {
    //Cache the content of the headings to a variable so it may be removed before creating a new H3
    //this allows us to select the new H3 without having to use more complex selectors
    var h3text = $('#WhatIHaveNow h3').text();
    // remove the old H3's now that we have their content
    $('#WhatIHaveNow h3').remove();
    // create a new, empty H3 at the top of the parent div
    $('#WhatIHaveNow').prepend("<h3></h3>");
    //insert our cached content
    $('#WhatIHaveNow h3').text(h3text);

});