Динамически добавлять HTML-элементы с JavaScript внутри DIV с определенным идентификатором

Хорошо, люди, мне нужна ваша помощь. Я нашел код здесь в Stackoverflow (не могу найти эту ссылку), который генерирует HTML-код динамически через JS. Вот код:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
      }
        return frag;
    }

    var fragment = create('<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>'); 

    document.body.insertBefore(fragment, document.body.childNodes[0]);

Этот код работает просто отлично! Но сгенерированный код появляется в верхней части страницы, прямо под тегом body. Я хотел бы сгенерировать этот код внутри пустого div с конкретным id="generate-here".

Итак, вывод будет:

<div id="generate-here">
    <!-- Here is generated content -->
</div>

Я знаю, что не могу увидеть сгенерированный контент с помощью "просмотра исходного кода". Мне нужно только генерировать этот контент только в этом конкретном месте с помощью #generate-here. Я Javascript Noob, так что если кто-то может просто изменить этот код, который будет идеальным. Большое спасибо!

PS Я знаю, как это сделать с помощью Jquery, но мне нужен собственный и чистый JavaScript в этом случае.

Ответы

Ответ 1

Все, что вам нужно сделать, это изменить последнюю строку. Это добавит созданный элемент в качестве дочернего элемента last div:

document.getElementById("generate-here").appendChild(fragment);

Это добавит созданный элемент в качестве дочернего элемента first div:

var generateHere = document.getElementById("generate-here");
generateHere.insertBefore(fragment, generateHere.firstChild);

Вы также можете использовать innerHTML, чтобы просто заменить все новым текстом (как и в вашей функции create). Очевидно, что это не требует, чтобы вы сохранили функцию create, потому что вам нужна строка html вместо объекта DOM.

var generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';

Ответ 2

Шаг 1. Позвольте создать функцию, чтобы вернуть нам упорядоченный список HTML. Обратите внимание, что мы передаем массив данных:

function createListView(spacecrafts){
    var listView=document.createElement('ol');
    for(var i=0;i<spacecrafts.length;i++)
    {
        var listViewItem=document.createElement('li');
        listViewItem.appendChild(document.createTextNode(spacecrafts[i]));
        listView.appendChild(listViewItem);
    }
    return listView;
}

Шаг 2. Затем покажите наш список в вашем div:

document.getElementById("displaySectionID").appendChild(createListView(myArr));