Блог

Главная - Вопросы по программированию - Вставить загрузочный элемент в div с помощью javascript

Вставить загрузочный элемент в div с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

Я хочу вставить html-тег с помощью javascript, но он не работает из-за кавычек.

.text работает только в переменной, но innerHTML не работает.

 $("#year_title").text(response[0]['year_title']);
document.getElementById('progress').innerHTML = '<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>';

Комментарии:

1. Привет, ты можешь опубликовать фрагмент html-кода?

Ответ №1:

Похоже, что проблема в двух новых строках:

 document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Hello</div></div>';  
 <div id="progress">
</div>

Ответ №2:

На самом деле проблема в том, что вы не можете заключать строки в одинарные (‘) или двойные («) кавычки в несколько строк. Вы можете преодолеть эту проблему 4 способами:

  1. Создайте свою строку в одной строке, используя одинарные (‘) или двойные («) кавычки.

 document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Hello World</div></div>';  
 <div id="progress">
</div>

  1. Объединение нескольких строк с помощью оператора конкатенации ( ):

     document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">' 
    'Hello World' 
    '</div>' 
    '</div>';  
 <div id="progress">
</div>

  1. Заключите строку в одинарные (‘) или двойные («) кавычки длиной в несколько строк, экранируя символ новой строки с помощью обратной косой черты()

 document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
    Hello World
    </div>
    </div>';  
 <div id="progress">
</div>

  1. Используйте многострочные строки в стиле ES6, используя обратные метки(`):

Посмотрите этот фрагмент:

 document.getElementById('progress').innerHTML = `<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Hello World
  </div>
    </div>`;  
 <div id="progress">
</div>