Как добавлять текстовые узлы без удаления содержимого?

Question

Всем привет.

Пытаюсь добавлять разный текст из между тегами переноса и закрывающими для ссылок. Для меня сложно то, что textContent удаляет все содержимое, конкретно img. Знаю, что InsertAdjacentHTML так не делает, но он не принимает переменную в качестве аргумента. А необходимо будет еще схожим образом "добавлять" ссылки, картинки в эту же разметку.

let pre = document.querySelector('pre').innerHTML;
let trimmed = pre.split("\n").map(e=>e.trim());
let aTag = document.getElementsByTagName('a');
let len = Math.min(trimmed.length, aTag.length); 
for (let i = 0; i < len; i++) {
    aTag[i].textContent = trimmed[i];
}

<pre>
First
Second
Third
</pre>
<div class="wrapper">
<div><a href=""><img src="https://example.com/wp-content/uploads/2024/03/first.png"><br></a></div>
<div><a href=""><img src="https://example.com/wp-content/uploads/2024/03/second.png"><br></a></div>
<div><a href=""><img src="https://example.com/wp-content/uploads/2024/03/third.png"><br></a>
</div>

С уважением.

Answer 1

Как вариант можно использовать innerHTML вместо textContent

let pre = document.querySelector('pre').innerHTML;
let trimmed = pre.split("\n").map(e => e.trim());
let aTag = document.getElementsByTagName('a');
let len = Math.min(trimmed.length, aTag.length);

for (let i = 0; i < len; i++) {
  aTag[i].innerHTML += trimmed[i];
}

<pre>
First
Second
Third
</pre>
<div class="wrapper">
  <div>
    <a href="">
      <img src="https://example.com/wp-content/uploads/2024/03/first.png">
      <br>
    </a>
  </div>
  <div>
    <a href="">
      <img src="https://example.com/wp-content/uploads/2024/03/second.png">
      <br>
    </a>
  </div>
  <div>
    <a href="">
      <img src="https://example.com/wp-content/uploads/2024/03/third.png">
      <br>
    </a>
  </div>
</div>

БЛОГ НА HUSL

Как добавлять текстовые узлы без удаления содержимого?

Ответы (1 шт):