Получить дочерний узел по классу (шаблон HTML)

Question

У меня есть шаблон, который я буду добавлять в тело несколько раз.Каждый из них будет одинаковым, за исключением того, что текст в одном из элементов будет отличаться:

<template id="template">
  <div class="activity">
    <p class="activityName"> <!-- to be changed -->
    </p>
    <button type="button" class="btn btn-primary">
      Edit
    </button>
  </div>
</template>

Когда я вставляю этот шаблон, я хочу отредактировать элемент .activityName.Я мог бы использовать Node.firstChild, но это означает, что если я изменю HTML в будущем, эта настройка может сломаться, если этот элемент больше не будет первым дочерним элементом.Можно ли извлечь его по классу из этого конкретного узла?Как то так:

var template = document.getElementById("template");
var clon = template.content.cloneNode(true);
clon.getElementsByClassName("activityName")[0].innerHTML = "text"; //this line needs changing
document.body.append(clon);

Answer 1

как насчет использования:

clon.querySelector(".activityName").innerHTML = "text"; 

Функция querySelector находит первый элемент, который соответствует указанному селектору, в этом случае наш селектор равен .activityName, это означает, что функция найдетПервый элемент с классом activityName

Теперь, если вы хотите получить все узлы с одним и тем же классом, вы должны использовать функцию querySelectorAll

Я вижу, что вы использовали template.content но в шаблоне нет свойства с именем content, может быть, вы имеете в виду что-то вроде var clon = template.querySelector('.activity')