Оберните innerHTML в div - PullRequest
Новая
       9

Оберните innerHTML в div

0 голосов
/ 31 января 2019

У меня есть функция JS, которая обновляет описания продуктов при изменении переменных.Здесь обновляется элемент. 

    Product.Config.prototype.updateProductShortDescription = function(productId) {
var shortDescription = this.config.shortDescription;
if (productId && this.config.childProducts[productId].shortDescription) {
    shortDescription = this.config.childProducts[productId].shortDescription;
}
$$('#product_addtocart_form div.short-description').each(function(el) {
    el.innerHTML = shortDescription;
});
};

Отлично работает, но хотел бы обернуть вывод в div.Кто-нибудь знает способ или завернуть innerHTML в тег раньше при его обновлении?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Я не знаю, откуда взялась ваша функция $$, но в Vanilla JS есть мое предложение: 

const descriptionText = "my short description";
const descriptionElements = document.querySelectorAll('#product_addtocart_form div.short-description');

Array.from(descriptionElements).forEach(function(el) {
  const newDiv = document.createElement('div');
  newDiv.classList.add('customDiv');
  newDiv.textContent = descriptionText;
  el.appendChild(newDiv);
});
div {
  border: 1px dotted silver;
  padding: .5em;
  margin: .25em;
}
<div id="product_addtocart_form">
  <div class="short-description">1</div>
  <div class="short-description">2</div>
  <div class="short-description">3</div>
</div>

Редактировать:

Прочитав свой первый комментарий, в своем коде вам просто нужно заменить:

  el.innerHTML = shortDescription;

по: 

  const descWrapper = document.createElement('div');
  descWrapper.innerHTML = shortDescription;
  el.appendChild(descWrapper);
0 голосов
/ 31 января 2019

Не используйте innerHTML, если вы просто устанавливаете текст.Он невероятно небезопасен и с радостью выполнит сценарии и свяжется с любым сервером, который используемый вами текст может дать указание браузеру, просто включив вредоносный HTML-код.

Вместо этого используйте свойство .textContent.

Но еще лучше, поскольку, похоже, вы все равно используете jQuery, просто используйте встроенный способ jQuery для создания элементов по мере необходимости: 

let div = $(`<div>${description}</div>`);
$(`.my-element`).append(div);

А если у вас уже есть элементы: 

let update = $(`<div>${description}</div>`);
$(`#your.query-selector goes:here()`).empty().append(update);

(поскольку jQuery позволяет вам связывать вызовы таким образом, чтобы они применялись к каждому элементу в выделенном фрагменте, это установит описание в виде div для каждого элемента в результате запроса)

...