Денис

Может я вас не понял, но разве этого нельзя сделать в ES5?

<script>
var obj = {
    W: 1,
    T: 1
};
obj.F = 1;
obj['?'] = 1;

console.log(Object.keys(obj)); // ["W", "T", "F", "?"]
</script>

Если я правильно понял, то в принципе, сюда можно прикрутить , решение которое я давал на похожий вопрос. Только заменить scrollTop на scrollLeft
Пример в песочнице

UPD jsfiddle.net/27mz45L2/1

var elH = horizontal.offsetHeight,
    elTop = horizontal.offsetTop,
    winH = window.innerHeight,
    factor = horizontal.scrollWidth / (elH * 2 + winH);
window.addEventListener('scroll', function (e) {
    var elPosTop = horizontal.getBoundingClientRect().top + elH,
        elPosBot = horizontal.getBoundingClientRect().bottom - elH;
    if ((elPosTop >= 0) && (elPosBot <= winH)) {
        var dE = document.documentElement,
            top = (this.pageYOffset || dE.scrollTop) - (dE.clientTop || 0);
        horizontal.scrollLeft = Math.abs(elTop - winH - top) * factor;
    }
}, false);

<!-- Элемент, перед которым необходимо добавить произвольный html-код  -->
<div id="target">Target</div>

// новый html-контент
var newHtml = '<div><span>Span 1.1</span><span>Span 1.2</span></div><div><span>Span 2.1</span><span>Span 2.2</span></div>';
// вставляем перед целевым элементом
document.getElementById('target').insertAdjacentHTML('beforeBegin', newHtml);

Пример в песочнице - jsfiddle.net/krfwuksy

www.awwwards.com там есть возможность отфильтровать сайты по технологиям, которые они используют. Например, svg - www.awwwards.com/websites/svg
Да и в принципе, можно найти очень много креативных идей.

jsfiddle.net/8rnvznse/1

<p>Pomodoro</p>
<div id="Mytimer">
    <p><a href="" id="timer">count!</a>
    </p>
    <p>
        <input type="text" id="volume" value="3" />vol</p>
</div>
<input type="button" value="+">
<input type="button" value="-">

var d = document;
d.addEventListener('DOMContentLoaded', function () {
    var inp = d.getElementById('volume'),
        out = d.getElementById('timer'),
        min = 0, seconds = inp.value * 60, timer;

    [].forEach.call(d.querySelectorAll('[type=button]'), function (but) {
        but.addEventListener('click', function () {
            inp.value -= -(this.value + '1');
            (inp.value <= 0) && (inp.value = 0);
        }, false);
    });

    out.addEventListener('click', function (e) {
        e.preventDefault();
        seconds = inp.value * 60;
        clearTimeout(timer);
        tiktak();
    }, false);

    function tiktak() {
        seconds--;
        if (seconds <= 0) {
            out.textContent = 'Finish!';
            clearTimeout(timer);
            return false;
        }
        min = Math.floor(seconds / 60);
        out.textContent = ('0' + min).slice(-2) + ':' + ('0' + (seconds - min * 60)).slice(-2);
        timer = setTimeout(tiktak, 1000);
    }
}, false);

Карта изображения, плюс, например, data-атрибут и получаете что-то в этом роде

<p class="info"></p>
<img alt="mashyna_taksy_nakleika_1_.jpg" src="http://i.piccy.info/i9/af7fb3ee41ec62c9160e3d6e8aec99c6/1445302105/40502/962048/mashyna_taksy_nakleika_1_.jpg" usemap="#myMap" width="459" height="459" />
<map name="myMap" id="myMap">
    <area shape="circle" coords="104,273,35" data-info="переднее колесо" />
    <area shape="circle" coords="351,272,36" data-info="заднее колесо"/>
    <area shape="poly" coords ="100,207,132,191,174,175,207,172,265,172,318,175,365,189,379,194,373,211,108,212"  data-info="стекло"/>
</map>

var output = $('.info'); // куда выводим
$('area').on({
    mouseenter: function(){
        output.text('Навели на ' + $(this).data('info'));
    },
    mouseleave: function(){
        output.text(''); // если надо...
    }
});

Можно попробовать создать массив и использовать indexOf()

var urls = [
    'url(google.com)',
    'url(yandex.ru)'
];

if( urls.indexOf($(this).css('background-image')) !== -1 ) {
    // есть
}

Только надо учитывать, что отличие даже в одном символе, может привести не к тому результату, на который надеетесь. Например, если в одном случае протокол прописан, а в другом нет.

появились проблема, как указать с тегами "li ul"

Этот момент я что-то не совсем понял; уточняйте. Но может такой вариант подойдёт без уточнений:

[].forEach.call(document.querySelectorAll('.MenuBlock_1_panel'), function (el) {
    el.addEventListener('mouseenter', function () {
        this.previousElementSibling.style.backgroundColor = '#F5F5F5';
    }, false);
    el.addEventListener('mouseleave', function () {
        this.previousElementSibling.style.backgroundColor = '';
    }, false);
});

Чисто интуитивно - вы используете метод .text(), а не .html()
P.S. Или же спец. символы преобразованы в мнемоники

'&ltimg src="image.jpg" alt="" >'

Типа дерева

Если "типа дерева", то в моем понимании - вопросы должны храниться в каком-то объекте. Вроде такого:

var q = {
    'Question 1' : {
        'Yes' : {
            'Question 1.1' : {
                'Yes' : 'Result',
                'No' : { /* ... */ }
            }
        },
        'No' : {
            'Question 1.2' : { /* ... */ }
        }
    }
};

Этот момент вы не указали, но если я угадал, то вариант может быть таким - jsfiddle.net/77ooxgwv

var q = {
    'Вы ненормальный?': {
        1: 'Windows Phone',
        0: {
            'Вы гей?': {
                1: 'Apple',
                0: {
                    'Цвет смартфона розовый?': {
                        1: 'Apple',
                        0: 'Android'
                    }
                }
            }
        }
    }
},
tmpl = '<p>@</p><input type="radio" name="ans" value="1">Да <input type="radio" name="ans" value="0">Нет',
cur = q[Object.keys(q)[0]],
out = $('output').html(tmpl.replace(/@/, Object.keys(q)[0]));

out.on('change', ':radio', function () {
    cur = cur[$(this).val()];
    if (typeof cur === 'string') {
        out.html('Вам подойдёт <b>' + cur + '</b><br>Тест окончен!');
    } else {
        out.html(tmpl.replace(/@/, Object.keys(cur)[0]));
        cur = cur[Object.keys(cur)[0]];
    }
});