ボタンをクリックすると、ページにhtmlファイルを含めることはできますか？

Question

私は、クリックすると別のhtmlページの内容を読み込む簡単なボタンでページを取得しようとしています。私が欲しいもの

<input type="button" value="Create a square" id="send" onClick="createaquare()" /> 

は私がボタンをクリックすると、機能は負荷の単純な四角を含む別のhtmlファイルと呼ばれる広場を作成することです。

<div></div> 

<style type="text/css"> 

div 
{ 
    height : 200px; 
    width : 200px; 
    background: red; 
    opacity : 0.3; 
} 

そして、私はボタンをクリックするたびに、別の四角が表示されます。それはどのようにjavascriptやjquery、ajax、anytingを使って可能ですか？

あなたは

Answer 1

別のHTTP呼び出しが発生するのではなく、常に同じ内容のファイルの内容を取得する必要があるため、ボタンクリック時に四角形を生成する方がはるかに優れています。

すべての新しいdivに独自のCSSクラスを与えることで、すべての元のdivをそのままにして、すべてのdivを同じスタイルにすることができます。

私の例では新しい正方形に同じコンテンツを追加していますが、クリックイベントハンドラに条件付きロジックを追加する場合は、独自の方法で異なる四角形で異なるコンテンツを作成できます論理。

追加するテキストが単なるテキストの場合はtextContentプロパティを使用して正方形にコンテンツを注入し、解析する必要があるコンテンツを挿入する場合はinnerHTMLプロパティを使用します（つまり、コンテンツにマークアップが含まれているリンクに「ESPN」というテキストを追加し、HTML <br>要素も追加します）。

var btn = document.getElementById("btnMakeSquare"); 
 

 
var counter = 1; 
 

 
btn.addEventListener("click", function(){ 
 

 
    // Create a new square and configure it: 
 
    var newSquare = document.createElement("div"); 
 
    newSquare.id = "newDiv" + counter; 
 
    newSquare.textContent = newSquare.id; 
 
    newSquare.setAttribute("class", "newDiv"); 
 
    
 
    // Now create content for that square (this can be anything) 
 
    var newLink = document.createElement("a"); 
 
    newLink.href = "http://espn.com"; 
 
    newLink.innerHTML = "<br>ESPN"; 
 
    newLink.id = "link" + counter; 
 
    
 
    // Put the link into the square: 
 
    newSquare.appendChild(newLink); 
 
    
 
    // Bump up the counter: 
 
    counter++; 
 
    
 
    // Inject the square (which now contains a link) into the DOM: 
 
    document.body.appendChild(newSquare); 
 
    
 

 
});

/* Only the one original div will be affected by this: */ 
 
#originalDiv { 
 
    height : 50px; 
 
    width : 50px; 
 
    background: red; 
 
    opacity : 0.3; 
 

 
} 
 

 
/* All generated divs will have the following class 
 
    so they will all look the same. But, none of the 
 
    original divs will have this class, so they won't 
 
    be affected.          */ 
 
.newDiv { 
 
    height : 75px; 
 
    width : 75px; 
 
    background: blue; 
 
    border:1px solid black; 
 
    font-weight:bold; 
 
    font-size:.1.5em; 
 
    color:yellow; 
 
    text-align:center; 
 
} 
 

 
/* This only affects links in new squares */ 
 
.newDiv > a{ 
 
    color:green; 
 

 
}

<input type="button" value="Create a square" id="btnMakeSquare"> 
 
<div id="originalDiv">I'm the original div</div>

Answer 2

あなたのページに別のWebページをロードするために<iframes>を使用することができますありがとうございました。 Javascriptを使用して、<iframes>のページを相互に追加し続けて、効果を作り出すことができます。 W3Schoolsには、<iframes>の使い方に関する記事があります。

編集：手元にあるタスクについての最善の方法は間違いありません。複数のWebページを読み込む必要なく、CSSとJavascriptを使用して同じ効果を達成することができます。