как сделать новый div с jquery?

Question

Хорошо, мне нужно создать новый div, используя jquery с информацией о имени и фамилии, которую я oop из своего массива. Это то, что у меня есть, мне было интересно, если я может получить некоторую помощь о том, как сделать так, чтобы это появилось на моей веб-странице. он должен отображаться как:

hello firstname lastname 
hello firstname lastname
hello firstname lastname

<div id="output"></div>

function names() {
         var firstAndLast = [
              {name: "jane", surname: "doe"},
              {name: "john", surname: "leg"},
              {name: "hunny", surname: "bun"}

            ];

        var div = $("#output");
            for (var i=0; i < firstAndLast.length; i++) {

        }

          var div1 = $("<div>").html("Hello name surname");
                 $("#names").append(div1);

Answer 1

Ваш код почти там. Основная проблема заключается в том, что вам нужно поместить строку jQuery, которая создает div и добавляет его в for l oop. Кроме того, вы можете извлечь name и surname из объектов в массиве, используя переменную i для доступа к ним по индексу:

var $output = $("#output");
for (var i = 0; i < firstAndLast.length; i++) {
  var div1 = $("<div>").html(`Hello ${firstAndLast[i].name} ${firstAndLast[i].surname}`);
  $output.append(div1);
}

При этом самый эффективный способ сделать это будет использовать map() для создания массива HTML строк, которые вы добавляете в DOM только один раз:

function names() {
  let firstAndLast = [
    { name: "jane", surname: "doe" }, 
    { name: "john", surname: "leg" }, 
    { name: "hunny", surname: "bun" }
  ]; 

  let html = firstAndLast.map(o => `<div>Hello ${o.name} ${o.surname}</div>`);
  $("#output").append(html);
}

names();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

Answer 2

Вы можете попробовать что-то вроде этого

function names() {
  var firstAndLast = [{
      name: "jane",
      surname: "doe"
    },
    {
      name: "john",
      surname: "leg"
    },
    {
      name: "hunny",
      surname: "bun"
    }

  ];


  let _data = firstAndLast.reduce((acc, {
    name,
    surname
  }) => {

    acc += `hello <span>${name}</span> <span>${surname}</span><br>`
    return acc;
  }, "")


  $("#output").html(_data);

}

names()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output">
</div>