1

Здравствуйте!

Подскажите пожалуйста, как в JavaScript(без использования jQuery и пр. библиотек) вставить такой html блок:

     <div id="id1">
        <span class="class1"> Текст1 </span>
    </div>

Вставить нужно в конец блока main:

   <div id="main">
        <div id="id2">
           <span class="class2"> Текст2 </span>
       </div>
   </div>

Пробую сделать так:

  var main= document.getElementById("main");
      main.appendChild('<div id="id1"><span class="class1"> Текст1 </span> </div>');

Но возникает ошибка. Видимо нужно DIV создать через CreateElement, ему усановить setAttribute("id", "id1"), и затем через .InnerHTML добавить <span class="class1"> Текст1 </span>. Это как-то сложно. Можно ли сделать проще?

Спасибо!

3
  • 1
    для этого и придумана жуйквери)) 13 сен 2016 в 7:53
  • вам два раза createelement, сначала спан, потом див, в него вставить спан, затем див в ставить в main, больше инфы learn.javascript.ru/modifying-document 13 сен 2016 в 7:55
  • 1
    Можно через main.innerHTML+= "<div...>"; Многие так делают, но это приводит к полному обновлению всего содержимого дива main, если там было выделение или поле ввода с введённой пользователем информацией, они потеряются.
    – sercxjo
    13 сен 2016 в 7:58

1 ответ 1

2

Например так:

 var main= document.getElementById("main");
 var str = '<div id="id1"><span class="class1"> Текст1 </span> </div>';
  
      main.innerHTML += str;
<div id="main">
        <div id="id2">
           <span class="class2"> Текст2 </span>
       </div>
   </div>

поменять местами:

 var main= document.getElementById("main");
 
 var str = '<div id="id1"><span class="class1"> Текст1 </span> </div>';
  
      main.innerHTML = str + main.innerHTML;
<div id="main">
        <div id="id2">
           <span class="class2"> Текст2 </span>
       </div>
   </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.