Как увеличить Id и использовать его после клонирования шаблона?

1

Можно ли клонировать шаблон, а затем увеличивать идентификатор шаблона после клонирования и как использовать новый идентификатор после клонирования.

Я хочу <div id= "id1"> или создать новый идентификатор для <div id= "id1"> Я хочу изменить идентификатор div, который включен в мой шаблон.

Вот мой код:

function cloneNewId() {
  var tmpl = document.getElementById('tempId');
  document.body.appendChild(tmpl.content.cloneNode(true));
}
cloneNewId();
cloneNewId();
<template id="tempId"> 
  <div id = "id1">
    <select id = "Id"> 
      <option value= "1"> </option>
      <option value="2"> </option>
    </select>
  </div>
</template>

Подробнее о шаблонах в MDN, который является отличным ресурсом javascript, который всегда есть под рукой.

  • 0
    Что за шаблон?
  • 1
    Что вы подразумеваете под шаблоном? Строка, содержащая html, элемент DOM и т. Д.? Используете ли вы какой-то фреймворк, если вам нужно упомянуть, какой это. Также включите соответствующий код, например, как вы сейчас клонируете указанный шаблон.
Показать ещё 8 комментариев
Теги:

3 ответа

0
Лучший ответ

Вы можете получить клонированный div с помощью Element.querySelector и установить идентификатор непосредственно в клонированном div. Кроме того, поскольку invoker захочет узнать вновь сгенерированный идентификатор, функция может вернуть свое значение:

let currentId = 1;

function cloneNewId() {
  const tmpl = document.getElementById('tempId');
  const clone = tmpl.content.cloneNode(true);
  const div = clone.querySelector('#id1');
  currentId += 1;
  div.id = 'id${currentId}';
  document.body.appendChild(clone);
  return div.id;
}

// Example:
console.log('First ID is:', cloneNewId());
console.log('Second ID is:', cloneNewId());
<template id="tempId"> 
  <div id = "id1">
    <select id = "Id"> 
      <option value= "1"> </option>
      <option value="2"> </option>
    </select>
  </div>
</template>
Поделиться
  • 1
    Это работает Другой вопрос, как я могу использовать новый созданный идентификатор после клонирования.
  • 0
    Не уверен, что вы имеете в виду, используя новый идентификатор. Сам идентификатор будет словом 'id' + число, так что вы можете получить getElementById('id2') или id3 и т. Д.
Показать ещё 4 комментария
0

Вы можете увеличить свой идентификатор div, используя следующий код. Я думаю, что этот пример кода решает вашу проблему

  var tmpl = document.getElementById('tempId');
  document.body.appendChild(tmpl.content.cloneNode(true));
  var append=tmpl.content.cloneNode(true);
append.children[0].id="id2";
console.log(append,"Append");
 document.body.appendChild(append);
 
<template id="tempId"> 
  <div id = "id1">
    <select id = "Id"> 
      <option value= "1"> </option>
      <option value="2"> </option>
    </select>
  </div>
</template>
Поделиться
0

Если вы хотите создать шаблон многократного использования, вы можете просто вернуть литерал шаблона в виде такой функции:

В приведенном ниже коде будет указатель, который вы хотите увеличить в качестве параметра, и использовать его в функции.

Функция вернет шаблон после его вызова.
Вы можете вызвать функцию и ввести свой шаблонный идентификатор независимо от того, что вы хотите.

function cloneTemplate(index, newID) {
	return '
  	<div id="${newID}">
    	  <span>Generate your own template here</span>
          <p>Hello ${index}</p>
        </div>
        '
}

let body = document.querySelector('body')

for (let i = 0; i < 3; i++) {
	body.innerHTML += cloneTemplate(i, 'template${i}')
}

Эта вещь будет выводить шаблон три раза с другим идентификатором.
Это то, чего вы хотите достичь?

Поделиться
  • 0
    Это на самом деле то, что я хочу, но я думаю, как я собираюсь вставить его в кнопку и как я буду использовать новый идентификатор.
  • 0
    Попробуйте это: jsfiddle.net/5w3smprz
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню