[HtmlAgilityPack] InsertBefore와 InsertAfter의 차이 (span 태그 제거) - 범상치 않은 블로그

InsertBefore

• 현재 노드의 앞에 새로운 노드를 삽입.
• 현재 노드를 제거하려고 할 때에는, 그 자리에 자식 노드를 삽입할 때 사용할 수 있어요.

예를 들어

<div>
    <span>텍스트</span>
</div>

만약 <span>의 자식을 InsertBefore로 삽입하면

<div>
    텍스트
    <span></span>
</div>

InsertAfter

• 현재 노드의 뒤에 새로운 노드를 삽입.
• 자식 노드가 부모 태그 안에 들어가지 않고, <span> 태그의 뒤에 위치하게 됩니다.

예를 들어

<div>
    <span>텍스트</span>
</div>

만약 <span>의 자식을 InsertAfter로 삽입하면

<div>
    <span></span>
    텍스트
</div>

코드에서 InsertBefore가 적합한 보통의 이유

• InsertBefore를 사용하면 기존 태그 자리에 자식 태그가 삽입되므로, 제거할 태그를 포함한 기존의 DOM 구조를 유지하면서 처리할 수 있습니다.
• 만약 InsertAfter를 사용하면 태그 위치가 어긋나거나 잘못된 구조가 발생할 가능성이 있어요.

간단히 요약

• InsertBefore: 부모 태그 안에서 현재 노드 앞에 새 노드를 삽입. 재귀적인 태그 제거에서 적합.
• InsertAfter: 부모 태그 안에서 현재 노드 뒤에 새 노드를 삽입.
• 중첩된 <span> 태그도 제거할 수 있어요.

잘못된 구조가 발생하는 InsertAfter 사용 예시

아래 예시는 InsertAfter를 사용했을 때 발생할 수 있는 구조적 문제를 보여드릴게요.

원본 HTML

<div>
    <span>안<span>녕하세요</span>!</span>
</div>

InsertAfter 사용 코드

foreach (var childNode in node.ChildNodes.ToArray())
{
    node.ParentNode.InsertAfter(childNode, node);
}
node.ParentNode.RemoveChild(node);

결과 HTML

<div>
    <span></span>안<span>하세요</span>!
</div>

문제 발생

• 내부 <span> 태그는 그대로 남아 있거나, 예상과 다른 순서로 삽입됩니다.
• <span> 태그의 제거가 끝나기 전에, 자식 태그가 현재 노드 뒤로 잘못 배치됩니다.

원리와 문제의 핵심

1. InsertAfter는 현재 노드 뒤에 새로운 노드를 삽입합니다.
   • 만약 node.ParentNode.RemoveChild(node)로 현재 노드를 제거하기 전에 자식 노드를 삽입하면, 자식 노드가 기존 DOM 트리에 제대로 병합되지 않을 가능성이 있습니다.
2. 구조가 복잡해질수록 삽입 순서가 왜곡될 수 있습니다.
   • 예를 들어, 중첩된 태그가 있을 때 내부 순서를 유지하기 어렵습니다.

제대로 된 결과를 얻으려면 InsertBefore 메서드를 사용하세요.

InsertBefore로 처리 코드

foreach (var childNode in node.ChildNodes.ToArray())
{
    node.ParentNode.InsertBefore(childNode, node);
}
node.ParentNode.RemoveChild(node);

결과 HTML

<div>
    안녕하세요!
</div>

원리

• InsertBefore는 현재 노드 앞에 자식 노드를 삽입하기 때문에 DOM 순서가 보존됩니다.
• node를 제거하기 전에 자식 노드가 정확히 해당 위치에 삽입되므로, 구조가 왜곡되지 않습니다.