Как динамически добавлять идентификаторы и значения в тег статьи через jquery?

Question

Мне нужно добавить сочетание идентификаторов и пути к элементу статьи динамически с помощью jquery

Это тег статьи HTML

<article class=test> <article/>

Я пытался сделать это в jquery.

var assetHtml='data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg"';

$( ".test" ).append(assetHtml);

Но это добавляет весь идентификатор и элементы в строковом формате, например, в кавычки, превращая его в строку, тогда как они являются идентификаторами в текстовой области тега статьи вместо внутреннего тега статьи

<article class="test">"data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg""</article> 

Я ожидаю, что вывод будет в этом формате

<article class=test data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg" > </article>

Как этого добиться?

Answer 1

append() используется для добавления содержимого в элемент.Чтобы изменить атрибуты элемента, вы можете использовать attr():

$(".test").attr({
  'data-asset-share-id': 'asset',
  'data-asset-share-asset': '/dam/pic.jpg',
  'id': '/dam/pic.jpg'
});

В качестве альтернативы вы можете использовать комбинацию prop() и data().Последний из них помещает значения в кэш jQuery, а не в DOM, что повышает производительность, но требует, чтобы вы также использовали data() в качестве метода получения для получения значений:

$(".test").prop('id', '/dam/pic.jpg').data({
  'asset-share-id': 'asset',
  'asset-share-asset': '/dam/pic.jpg'
});

Answer 2

Я признаю, что вопрос требует решения с использованием библиотеки jQuery, но для полноты здесь дополнительно приводится решение с использованием ванильного javascript.

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

// GET THE ARTICLE ELEMENT
const testArticle = document.getElementsByClassName('test')[0];

// CREATE OBJECT CONTAINING ATTRIBUTES AND VALUES
const assetHtml = {

  'data-asset-share-id' : 'asset',
  'data-asset-share-asset' : '/dam/pic.jpg',
  'id' : '/dam/pic.jpg'
}

// GET THE ATTRIBUTES (ie. THE KEYS OF THE OBJECT ABOVE)
const assetHtmlAttributes = Object.keys(assetHtml);

// ASSIGN ATTRIBUTES AND VALUES TO THE ELEMENT
assetHtmlAttributes.forEach((attribute) => testArticle.setAttribute(attribute, assetHtml[attribute]));

// VIEW UPDATED ELEMENT
console.log(testArticle);

<article class="test"></article>

Answer 3

Вы можете использовать следующую логику, используя split() и attr() методы

$(function(){
var assetHtml='data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg"';
var assetAttr = assetHtml.split(' ');
for(var i=0; i<assetAttr.length; i++) {
   var attr = assetAttr[i].split('=');
   $( ".test" ).attr(attr[0], attr[1]);
}
});

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