Прочитайте фрагмент HTML из DOM и добавьте в него пользовательские данные.

Question

Я привык использовать jQuery для запроса элементов по их идентификатору и помещать в них или в их атрибуты некоторые пользовательские данные, полученные из веб-службы.

Но теперь данные, которые я получу, представляют собой массивобъекты. Так что дело не только в добавлении данных в один элемент. Мне нужно прочитать li, в котором есть некоторый HTML, а затем заменить некоторые элементы этого HTML данными из одного объекта.

Это должно быть сделано для каждого объекта в массиве, поэтому мне нужночтобы создать новый li из этого «шаблона», заполните его, затем добавьте в ul.

Я могу запросить ul, найти его li и удалить егоиз DOM и добавьте к нему несколько li s.

Но я не знаю, как, имея li в объекте jQuery, вносить изменения в его innerHTML. Это та часть, которую я потерял, так как мне все еще не удалось найти какое-либо решение в Google.

Вот пример: https://jsfiddle.net/r76vpLdg/

Как создать новый объект на основе template и заменить содержимое этих 2 span с? Я добавил второй список с примером желаемого результата.

Answer 1

Вот решение Vanilla JS, использующее объект JSON в качестве источника данных и строки шаблона.

Если использование jQuery не является обязательным, в этом случае нет причин использовать его.

<p>template:</p>
<ul id="myListContainer">

</ul>

<button onclick="createTemplateStrings()">
START
</button>

function createTemplateStrings (){

var obj = [
{"name": "John", "weekday" : "Wednesday"},
{"name": "Marry", "weekday" : "Sunday"},
{"name": "Edward", "weekday" : "Friday"},
{"name": "Jack", "weekday" : "Tuesday"}
]

let ul = document.getElementById('myListContainer')

for(let row of obj){

let li = document.createElement('LI')
li.innerHTML = `Hello, ${row.name}, how's your ${row.weekday} ?`
ul.append(li)

}


}

Answer 2

Вы можете создавать элементы «в памяти», не являясь частью DOM, создавать их, а затем добавлять их в DOM по мере необходимости, например:

 var li = `$("<li>"); 
 li.html(innerHTML); 
 ul.append(li);

Рабочий пример:

var ul = $("ul");

$("button").click(function() {
  var li = $("<li>");
  li.text("new item");

  ul.append(li);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>item</li>
</ul>
<hr/>
<button type='button'>add</button>

Чтобы работать с существующим «шаблоном», вы можете .clone() существующий li и внести изменения, одно из возможных решений / пример:

var ul = $("ul");

$("button").click(function() {
  // create a copy of the "template"
  var li = ul.find("li.template").clone().removeClass("template");  
  
  // make changes 
  li.find("span").removeClass("first").addClass("new").text("new");

  ul.append(li);
});

li>span.first { color: blue; }
li>span.new  { color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='template'>This is the <span class='first'>first</span> item</li>
</ul> 
<hr/>
<button type='button'>add</button>