콘텐츠를 방해하지 않고 태그를 대체하려면 어떻게해야합니까?

Question

Am은 내용을 방해하지 않고 HTML 태그 (열기와 닫기 모두)를 제거하려고합니다. 이 마크 업 주어진 예를 들어

, ...

var temp = 
<span id="myspan1"> 
<span id="myspan2" class="new"> 
hello world !</span> 
</span> 

나는이에 싶어 ...

var newcontent = 
<span id="mySpan1"> 
    hello world ! 
</span> 

날 JQuery와에두고 해결 도와주세요. 그것은 효과적으로 태그를 제거 myspan2의 내용으로 myspan1 범위의 내용을 대체

$("#myspan1").html($("#myspan2").html()); 

:

는

Answer 1

이 한 당신이 myspan1 기간에 다른 내용이 없기 때문에, 작동합니다. 주어진 예제에서는 작동하지만 myspan2 외에 myspan1 내부에 다른 콘텐츠가있는 경우 오류가 발생합니다.

Answer 2

$('#myspan1').html($('#myspan2').html()); 

Answer 3

나는 jQuery에 unwrap이 있다고 생각합니다. unwrap이 부모를 제거하기 때문에 #myspan2의 내용을 가져와 #myspan2 부모를 제거 할 수 있도록해야합니다 (ending up with #myspan1 being the parent).

$('#myspan2').contents().unwrap(); 

unwrap이 html하는 것보다 더 나은 이유를 더욱 명확히하기 위해

당신이 .html()을 수행 할 때, 그것은 단지 현재 요소에서 내림차순 DOM의 캐릭터 라인 표현을 검색하는 것입니다. 이러한 자손과 함께 제공되는 핸들러 및 데이터는 가져 오지 않습니다. 따라서 해당 HTML 문자열을 사용하여 DOM을 다시 만들면 DOM을 올바르게 다시 작성하지만 그 자손에 연결된 does not anymore have the handlers and data이 다시 작성됩니다. 코드

$('#myspan1').html($('#myspan2').html()) 

Answer 4

시도는 부모 요소에 직계 자식 요소의 내용을 지정하고자하는 경우

var temp = '<span id="myspan1"><span id="myspan2" class="new">hello world !</span></span>'; 

var $t = $(temp); 
$t.find('.new').contents().unwrap(); 
console.log($t[0].outerHTML) 

Answer 5

아래

이

Answer 6

을 시도, 당신이 사용할 수있는이

$("#myspan2").parent().html($("#myspan2").html());