Использование класса вместо идентификатора в JS для выполнения действия

Question

Во-первых, извините, я не очень хорошо разбираюсь в javascript.

HTML:

<div id="Comment-ID">
   <p class="comment-content">...</p>
 </div>

JavaScript: (Edit: добавлен весь код)

<script type='text/javascript'>
function autoloadmore() {
  var loadmoreClass = document.getElementsByClassName(&quot;loadmore&quot;)[0];
  var loadmoreChild = loadmoreClass.querySelector(&#39;a&#39;)

  if (loadmoreClass) {
    loadmoreChild.click();
  }
}
//<![CDATA[
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
document.getElementById(id).innerHTML = sustituir;
}
//]]>



window.onload = function() {
  autoloadmore();
  setTimeout(function(){
    InsertarImagenVideo('Comment-ID');
  },3000);
};
</script>

«InsertarImagenVideo» заменяет текст внутри изображения.Вместо того, чтобы использовать его в «Comment-ID», я хочу использовать его в «Comment-class».

Примечание: я не могу редактировать HTML.

Я не смог найтичто-нибудь, когда я искал, или, может быть, я не знал, как выглядеть.Может ли кто-нибудь помочь мне с этим?

Answer 1

Я нашел простой способ вставить изображение в элемент <p class="comment-content">...</p>, взяв родительский элемент <div id="Comment-ID">.

Я предполагаю, что вам нужно получить уникальный id, чтобы затем получить доступ квнутренний <p> элемент для замены существующего текста изображением.Этот код захватывает уникальный элемент id, а затем захватывает первый тег <p>, используя .getElementsByTagName('p')[0].Одна вещь, которую я добавил, - это правильный скрипт загрузки изображения для обновления тега <p> изображением после его загрузки (может быть, это устраняет необходимость использования функции setTimeout у вас?).

let classElement = document.getElementById("Comment-ID").getElementsByTagName('p')[0];
let imageObject = new Image();
imageObject.src = `https://www.clipartmax.com/png/full/1-14442_smiley-face-png-smiley-png.png`;

imageObject.onload = function() {
    classElement.innerHTML = `<img id="myImg" src="${imageObject.src}" />`; 
  let imageElement = document.getElementById(`myImg`);
  imageElement.width = 100;
  imageElement.height = 100;
};

Вот демоверсия JSFiddle верхнего кода в действии.

Надеюсь, это поможет:)

Answer 2

Вы можете использовать document.querySelector , чтобы выбрать элемент по классу:

Обновить эту строку: var IDelemento = document.getElementById(id),

до var IDelemento = document.querySelector(id),

и передайте класс селектор вашему методу InsertarImagenVideo

setTimeout(function(){
    InsertarImagenVideo('.comment-content');
},3000);