Добавить внутренний элемент через jQuery

Question

Я использую jquery 3, и я хотел бы добавить внутренний тег span со стилем.

var data = "test1, test2, test3";
var dataArr = data.split(',');
var restArr = dataArr.slice(1);

var $elem = $('<span>', {
  'data-function': "addSynonym",
  'data-options': '[' + restArr.join(',') + ']'
});

$elem[0].innerText = dataArr[0]
console.log($elem[0])

// WANTED Output: <span data-function="addSynonym" data-options="[test2, test3]"><span style="background-color: yellow;">test1</span></span>

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

Окончательный результат должен выглядеть следующим образом (обратите внимание на дополнительные разыскиваемые "" до и после тега:

<span data-function="addSynonym" data-options="[test2, test3]"><span style="background-color: yellow;">test1</span></span>

Любые предложения, как создать внутренний элемент?

Я ценю ваши ответы!

Answer 1

Вы можете продолжить таким же образом и использовать атрибут html для передачи внутреннего элемента

var data = "test1, test2, test3";
var dataArr = data.split(',');
var restArr = dataArr.slice(1);

var $elem = $('<span>', {
  'data-function': "addSynonym",
  'data-options': '[' + restArr.join(',').trim() + ']',
  'html': $('<span>', {
    'text': dataArr[0],
    'css': {
      backgroundColor: 'yellow'
    }
  })
});

// without spaces
console.log($elem[0].outerHTML)
// with spaces
console.log(` ${$elem[0].outerHTML} `);

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

Answer 2

var data = "test1, test2, test3";
var dataArr = data.split(',');
var restArr = dataArr.slice(1);

var $elem = $('<span>', {
  'data-function': "addSynonym",
  'data-options': '[' + restArr.join(',') + ']'
});

var $innerElem = $('<span>' + dataArr[0] + '</span>').css({
  backgroundColor: "yellow"
})

$elem.append($innerElem);

console.log($elem[0].outerHTML)

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

Answer 3

Как я уже упоминал в разделе комментариев, возможно, одним из решений может быть использование html() для добавления уже найденного span. Аналогично использованию innerHTML.

О .html(htmlString), пожалуйста, прочитайте из документации:

Установите HTML содержимое каждого элемента в наборе согласованных элементов.

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

var data = "test1, test2, test3";
var dataArr = data.split(',');
var restArr = dataArr.slice(1);

var $elem = $('<span>', {
  'data-function': "addSynonym",
  'data-options': '[' + restArr.join(',') + ']'
});

$($elem[0]).html(`<span style="background-color: yellow;">${dataArr[0]}</span>`);
console.log($elem[0]);
console.log($elem[0].innerHTML);

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

Надеюсь, это поможет!