Чистый способ заполнения содержимого элемента

Question

Мне нужно добавить содержимое (HTML) к элементу. Вот как я это делаю сейчас ...

element.innerHTML += "<a href=\"" + something[awesome] + "\">" + something[great] + "</a>"; 
element.innerHTML += "<br>"; 

Это кажется очень грязным. Есть ли более чистые способы сделать это? Правильно ли это способ createElement()?

Answer 1

Это зависит от ваших потребностей, но если вы хотите сохранить его простым и близко к тому, что у вас есть прямо сейчас, просто изменится:

var s = "<a href=\"" + something[awesome] + "\">" + something[great] + "</a>"; 
element.innerHTML += s + "<br>"; 

Выражаясь словами, строить свою строку в переменную , а не непосредственно на имущество innerHTML.

Answer 2

Предполагая element, something, awesome и great уже определены, я обычно делаю что-то вроде этого:

// build anchor 
var anchorElement = document.createElement('a'); 
anchorElement.href = something[awesome]; 
anchorElement.appendChild(document.createTextNode(something[great])); 

// build break tag 
var breakElement = document.createElement('br'); 

// append 
element.appendChild(anchorElement); 
element.appendChild(breakElement); 

Распад, вероятно, нет необходимости. Просто используйте CSS, чтобы сделать блок привязки или создать визуальное разделение.

Вот скрипку, чтобы играть с: https://jsfiddle.net/30qvd2vm/