Início / coding / Perguntas / 78051726
Accepted
sudoExclamationExclamation
Asked: 2024-02-24 16:44:47 +0800 CST

Em Javascript, como posso querySelector para obter o innerHTML excluindo um dos divs irmãos internos

  • 772

Eu tenho o seguinte html:

<body>
    <span class="comment">
        EXAMPLES:
        <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
        <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
        <div class="reply"><p><u><a href="reply?id=12323" rel="nofollow">reply</a></u></p></div>
        <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
    </span>
</body>

Estou tentando obter o innerHTMLda .commentclasse, exceto o .replydiv.

Observe que não é garantido que a .replyaula seja a última.

Basicamente, quero obter apenas:

EXAMPLES:
<p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
<p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
<p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>

Não consigo descobrir como posso excluir um dos filhos irmãos.

Eu sei que posso pegar as crianças, exceto a .replyturma, usando o seguinte:

document.querySelectorAll(`.comment > :not(.reply)`)

Mas este não é o innerHTML. É um NodeList:

insira a descrição da imagem aqui

Existe uma maneira de obter um novo elemento combinado NodeListque eu possa invocar innerHTML?

Encontrei uma pequena pergunta semelhante aqui:

Javascript .innerHTML, mas excluindo div interno

mas essa questão é sobre como extrair uma string específica e as soluções parecem feias. Existe uma maneira melhor?

javascript

1 respostas

  1. Best Answer

    Faça um clone profundo do commentnó e remova - replyo antes de recuperar innerHTML:

    var comment = document.querySelector(".comment").cloneNode(true);
comment.querySelector(".reply").remove();
console.log(comment.innerHTML);
    <span class="comment">
  EXAMPLES:
  <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
  <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
  <div class="reply"><p><font size="1"><u><a href="reply?id=12323" rel="nofollow">reply</a></u></font></p></div>
  <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
</span>

    Observe que adicionei a </font>tag de fechamento ausente ao seu exemplo. Sem isso, a abertura incomparável <font>permaneceria no innerHTML.

    • 1

relate perguntas