填充元素内容的干净方式

Question

I need to append content (HTML) to an element. This is how I am currently doing it...

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

This seems very messy. Are there any cleaner ways of doing this? Is the createElement() method the correct way of achieving this?

Answer 1

Assuming element , something , awesome , and great are already defined, I would usually do something like this:

// 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);

The break is probably unnecessary. Just use CSS to make the anchor block or create the visual separation.

Here's a fiddle to play around with: https://jsfiddle.net/30qvd2vm/

Answer 2

It depends on your requirement, but if you want to keep it simple and close to what you have right now, just change to:

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

To put it in words, build your string in a variable, not directly on the innerHTML property.