HTML을 다른 HTML 덩어리로 바꾸는 방법 JS

-1

을 사용하여 버튼을 클릭하는 페이지를 만들고 그 옆의 div 코드를 변경하려고합니다. 본질적으로, 나는 링크를 클릭하고 div 내에서 코드를 변경할 수 있기를 원한다.HTML을 다른 HTML 덩어리로 바꾸는 방법 JS

번호 하나 : 여기

는 두 개의 서로 다른 HTML 코드입니다 (ID = contentPOP)

<div id="contentPOP"> 
      <h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3> 
      <iframe width="500" height="300"  
        src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
        frameborder="0" allowfullscreen> </iframe> 
       <br> 
      <h3>Remembering Steve Jobs</h3> 
      <iframe width="500" height="300" 
        src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"  
        frameborder="0" allowfullscreen></iframe> 
     </div>

수 두 (ID = "contentNEW")

<div id="contentNEW"> 
      <h3>Slow Motion War!</h3> 
      <iframe width="500" height="300" 
        src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
        frameborder="0" allowfullscreen></iframe> 
      <br> 
      <h3>1 Year Aniversary of Teddy Bear Productions!</h3> 
      <iframe width="500" height="300" 
        src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA" 
        frameborder="0" allowfullscreen></iframe> 
     </div>

Here is an example of all the code

참고 :이 작업을 수행하는 방법을 모릅니다. 자세한 설명은 매우 도움이 될 것입니다. ful. 또한 JS로만이 작업을 수행 할 수 있기를 원합니다.

출처

2014-11-24 TheCoderWhoLikesToCode

지금까지 가지고있는 자바 스크립트를 알려주십시오. – thatidiotguy

좋은 노력, "javascript html"을 (를) 바꾸는 것처럼 Google에 시도한 적이 있습니까? – Vland

시도해 볼 방법이 없기 때문에 지금 당장은 JS가 없습니다. 나는 도움없이 w3schools를 검색해왔다. – TheCoderWhoLikesToCode

듣기,이 작업은 매우 간단합니다. 자신의 div 안에 두 코드 덩어리를 감싸고 고유 한 ID를 부여하면 jquery에서 대상을 지정할 수 있습니다. 숨겨진 inittialy, 그것에 연결된 display:hidden 클래스를 가지고 다음 전환 토글을 사용할 수 있습니다. 쉬운! 행운

HERE IS AN EXAMPLE!!!

좋은!

HTML

<p>This is a paragraph.</p> 
<p class="hidden">This is a second paragraph.</p> 
<button>Toggle </button>

CSS

.hidden{ 
    display:none; 
    }

$(document).ready(function(){ 
$("button").click(function(){ 
    $("p").toggle(); 
    }); 
});

출처

2014-11-24 19:05:26 LOTUSMS

너의 것만이 wrks, 그래서 그것을 받아 들일 것 같아요. 그러나, 나는 정말 JQuery를 이해하지 못한다. – TheCoderWhoLikesToCode

첫째, 주석 소위는 페이지에있는 다음

<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE 
<div id="contentNEW"> 
    ... 
</div> 
-->

대신 CSS와 그것을 숨길 :

function newVids() { 
    // target the div you want to change 
    var div = document.getElementById('contentPOP'); 
    // replace its innerHTML with the innerHTML of the hidden div 
    div.innerHTML = document.getElementById('contentNEW').innerHTML; 
}

이것은 당신이하려는 일에 대해 갈 수있는 가난한 방법은 정말 :

이

#contentNEW { display: none; }

그런 다음 당신의 newVids() 기능에 다음을 추가 . 각 div를 다른 div로 교체하는 대신 표시 여부를 전환하는 것을 고려하지 않아야합니다.

출처

2014-11-24 19:05:35 izolate

HTML을 다른 HTML 덩어리로 바꾸는 방법 JS

답변

관련 문제