Как подставить значение data-id контейнера в код?

Question

[Ермек Смагулов]

Добрый день!

Я далек от веб разработки на данный момент, прошу помочь. Мне необходимо, чтобы айдишки контейнера и скрипт под ними менялись в зависимости от data-id контейнера, внутри которого лежат "изменяемые".

Есть вот такая конструкция:

<div data-id="100">
<div id="adfox_157047490239139771-N"></div>
<script>
    window.Ya.adfoxCode.createAdaptive({
        ownerId: 325119,
        containerId: 'adfox_157047490239139771-N',
        params: {
            pp: 'g',
            ps: 'dpmn',
            p2: 'gopy'
        }
    }, ['desktop', 'tablet'], {
        tabletWidth: 830,
        phoneWidth: 480,
        isAutoReloads: false
    });
</script>
</div>
<div data-id="200">
<div id="adfox_157047490239139771-M"></div>
<script>
    window.Ya.adfoxCode.createAdaptive({
        ownerId: 325119,
        containerId: 'adfox_157047490239139771-M',
        params: {
            pp: 'g',
            ps: 'dpmn',
            p2: 'gopy'
        }
    }, ['desktop', 'tablet'], {
        tabletWidth: 830,
        phoneWidth: 480,
        isAutoReloads: false
    });
</script>
</div>

Подскажите, пожалуйста, как сделать так, чтобы вместо N подставилось значение "100", а вместо M - значение "200".

Answer 1

[Максим Морев]

Вроде того:

const containers = document.querySelectorAll('div[data-id]');
containers.forEach(container => {
  const containerID = container.getAttribute('data-id');
  const innerDiv = container.firstElementChild;
  innerDiv.id = 'adfox_157047490239139771-' + containerID; 
});

Не проверял, но вроде негде ошибиться.

Замечу, что очень ненадёжно делать выборку 'div[data-id]', в идеале - вам нужно контейнерам задать какой-то уникальный класс/атрибут и по нему выбирать, точно также выбирать и дочерний (в моём варианте просто берётся первый узел).
Ну и ещё отмечу, что чтобы работало в ИЕ11 и всяких старых Сафарях, нужно const заменить на var и озаботиться подключением полифилла forEach для nodeList

UPD:
Это что касается изменения ID элемента. Что касательно свойства в коде... Изменить его не получится никак в таком виде. Можно всю структуру целиком собрать на JS и вызвать код. Вроде того:

function createStructure(id) {
  const div = document.createElement('div');
  div.setAttribute('data-id', id);
  
  const innerDiv = document.createElement('div');
  innerDiv.id = 'adfox_157047490239139771-' + id;
  div.appendChild(innerDiv);
  
  document.body.appendChild(div);
  
  window.Ya.adfoxCode.createAdaptive({
    ownerId: 325119,
    containerId: 'adfox_157047490239139771-' + id,
    params: {
      pp: 'g',
      ps: 'dpmn',
      p2: 'gopy'
    }
  }, ['desktop', 'tablet'], {
    tabletWidth: 830,
    phoneWidth: 480,
    isAutoReloads: false
  });
}

createStructure('100');
createStructure('200');