Как использовать javascript для создания панировочных сухарей?

Question

Я новичок в javascript, и поэтому знаю, что у меня что-то не хватает, но я просто не могу сказать, что это такое, что мне не хватает.

Я создаю виджет для Adobe Muse, и я хочу, чтобы пользователь мог добавлять или удалять сухарики внутри виджета. Виджет позволяет пользователю установить истинное или ложное значение, и я использую функцию document.write для написания кода. Виджет использует marka.org, поэтому itemprop itemscope whatnot.

Вот что сценарий выглядит

<script type="text/javascript"> 
    var crumb2 = "true"; 
    var crumb3 = "true"; 
     if (crumb2 == "true") { 
      document.write("<span>Crumb2</span><span itemscope itemtype='http://data-vocabulary.org/Breadcrumb'><a href='crumb2.html' itemprop='url'><span itemprop='title'>Crumb2 Title</span></a></span>"); 
     } else if (crumb3 == "true") { 
      document.write("<span>Crumb3</span><span itemscope itemtype='http://data-vocabulary.org/Breadcrumb'><a href='crumb3.html' itemprop='url'><span itemprop='title'>Crumb3 Title</span></a></span>"); 
     } 
</script> 

Из того, что я думаю, я понимаю, когда первая переменная читается как верно, он будет игнорировать остальную часть переменных (по крайней мере, когда код написан в как я это написал). Предполагая, что это так, как я могу заставить его не делать этого (из-за отсутствия правильной терминологии)?

Answer 1

Почему document.write? Должен быть лучший способ.

Это говорит, что ваш вопрос заключается в том, как я могу иметь более одного условного процесса независимо от результата предыдущего условного выражения? Ответ: не используйте часть else.

if (true) { 
    // Will exuecute 
} else if (true) { 
    // Will never execute 
} 

VS

if (true) { 
    // Will execute 
} 
if (true) { 
    // Will execute 
} 

Чтобы следить за document.write комментарий, я не знаю, Adobe Muse, но если это в браузере вы должны использовать DOM API (или JQuery) для управления изменениями. document.write - очень скользкий склон и плохая практика.

Вместо почему не функция, как это:

function makeCrumElement(url, title) { 
    var root = document.createElement('span'); 
    root.setAttribute('itemscope'); 
    root.setAttribute('itemtype', 'http://data-vocabulary.org/Breadcrumb'); 
    var aTag = document.createElement('a'); 
    aTag.setAttribute('itemprop', 'url'); 
    aTag.setAttribute('href', url); 
    var spanTitle = document.createElement('span'); 
    spanTitle.setAttribute('itemprop', 'title'); 
    var titleText = document.createTextNode(title); 
    spanTitle.appendChild(titleText); 
    aTag.appendChild(spanTitle); 
    root.appendChild(aTag); 
    return root; 
} 

Или используйте innerHTML:

function makeCrumElement(url, title) { 
    var root = document.createElement('span'); 
    root.setAttribute('itemscope'); 
    root.setAttribute('itemtype', 'http://data-vocabulary.org/Breadcrumb'); 
    root.innerHTML = '<a href="' + url + '" itemprop="url"><span itemprop="title">' + title + '</span></a>'; 
    return root; 
} 

Или с JQuery:

function makeCrumElement(url, title) { 
    var root = $('<span><a><span></span></a></span>') 
    .attr({ 
     itemscope: true, 
     itemtype: 'http://data-vocabulary.org/Breadcrumb' 
    }); 
    root.find('a') 
    .attr({ 
     itemtype: 'url' 
     href: url 
    }) 
    .find('span') 
    .attr({ 
     itemprop: 'title' 
    }) 
    .text(title); 
    return root; 
}