Создать <div>с одним элементом

Question

У меня есть запрос AJAX:

function getLocation() {
    $.get('../class/info/act/all', function (locations) {
        window.locations = locations;
        var key = ["id", "name", "nodelist"];
        for(var l = 0; l < locations.length; l++) {
            var roomValue = {};
            roomValue = locations[l];
            var span = document.createElement("div");

            for (var p = 0; p < key.length; p++) {
                if(locations[l]){
                    var anchor = document.createElement('a');
                    anchor.classList.add("content" + l);
                    span.append(anchor);
                    var textContent = document.createTextNode(roomValue[key[p]]);
                    anchor.append(textContent);
                    $(".roomContent").append(span);
                }
            }
        }
    })
}

<div id="inner" class="roomContent">
    </div>

After the request is done, the div is populated like this:

<div>
<a class=""content0">1</a>
<a class=""content0">ROOM1</a>
<a class=""content0">1,2</a></div>

То, что я хочу, это один элемент, содержащий всю информацию, что-то вроде этого:

<div>
<a class=""content0">1 ROOM1 1,2</a></div>

Есть идеи? Есть ли способ разделить информацию? Я искал подсказку, но ничего не нашел

Answer 1

Вам нужно будет создать и прикрепить якорь за пределами вашего цикла for, чтобы он фактически делал это только один раз.

function getLocation() {
$.get('../class/info/act/all', function (locations) {

    if(locations.length === 0) { //do nothing if there's nothing to do
        return;
    }
    window.locations = locations; //window shouldn't be used to store unnecessary non-global variables, use correct scope

    var key = ["id", "name", "nodelist"];

    //prepare elements
    var anchor = document.createElement('a'); 
    var span = document.createElement("div");

    //fill with values, set classes
    for(var l = 0; l < locations.length; l++) {
        var roomValue = {};
        roomValue = locations[l];

        for (var p = 0; p < key.length; p++) {
            if(locations[l]){ //this is unnecessary as it is always true - you're already iterating through the array                   
                anchor.classList.add("content" + l);                    
                var textContent = document.createTextNode(roomValue[key[p]]);
                anchor.append(textContent);
            }
        }           
    }

    //append prepared elements
    span.append(anchor);
    $(".roomContent").append(span);
})

}

Answer 2

добавить внешнюю петлю: var span = document.createElement("div"); var anchor = document.createElement('a'); anchor.classList.add("content" + 0); span.append(anchor);