jQueryを使用せずに既存のファイルにHTMLを追加する方法は？

1つのHTMLファイルの内容（タグとすべてを含む完全なファイル）をdivに追加する方法はありますか？純粋なJavaScriptを使用する方法ですか？あるいは、個別にたくさんの要素を追加して、それを関数にする唯一の方法ですか？jQueryを使用せずに既存のファイルにHTMLを追加する方法は？

出典

2017-12-11 Shreyansh Chouhan

簡単。 ajaxリクエストを作成し、必要な場所にロードされた文字列を追加します。 – dfsq

jQueryを使用しないと非常に簡単ですが、インライン化するHTMLが有効な場合、別のHTMLドキュメントに挿入しないでください。と要素が含まれます。 – Touffy

@Touffy hmm ...まあ、私はそれをスキップすることができますと応答に感謝！ –

あなたはAJAXでこれを行うことができますが...しかし、キャッチがあります。

<html> 
<head> 
<title>Ajax Wizardry</title> 
<script> 
    function ajax(requestedForm,target) { 
    var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById(target).innerHTML=xmlhttp.responseText; 
     console.log("Content Updated"); 
    } 
    console.log("ajax status: "+xmlhttp.status); 
    } 

xmlhttp.open("GET",requestedForm,true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("action=fetch"); 
} 
</script> 
</head> 
<body> 

     <input type='button' value='Ajax Magic' onclick='ajax(`stufftoloadintodiv.html`,`target_1`)' /> 

<div id='target_1'></div> 

</body> 
</html>

stufftoloadintodiv.html内容

<p style='color:red;'>Hello World</p>

私はここに行っていることという関数を作成している：あなたがロードするHTMLは...など

メインページを<html>か<head>タグを持つべきではありません2つの変数を受け取る 'ajax'。最初は読み込みたいファイルへのパス、2番目は目的の要素idです。したがって、<div id='biscuits'></div>があり、 'digestive.html'の内容を読み込みたい場合は、ajax('digestive.html','biscuits')

出典

2017-12-11 09:32:35

a.html：

<html> 
    <body> 
    <h1>Put here your HTML content before insertion of b.js.</h1> 
     ... 

    <script src="customscript.js"></script> 

     ... 

    <p>And here whatever content you want afterwards.</p> 
    </body> 
</html>

customscript.js：

document.write('\ 
\ 
    <h1>Add your HTML code here</h1>\ 
\ 
    <p>Notice however, that you have to escape LF's with a '\', just like\ 
     demonstrated in this code listing.\ 
    </p>\ 
\ 
');

出典

2017-12-11 09:24:44 nadun

のいずれかの簡単な解決策がiframeからファイルを参照することです。この方法を使用すると、ファイルのHTML構造について心配する必要はありません。

出典

2017-12-11 10:11:21 ZippyV

jQueryを使用せずに既存のファイルにHTMLを追加する方法は？

答えて

関連する問題