22

わかりました、人々、私はあなたの助けが必要です。JS を介して動的に HTML コードを生成するコードを Stackoverflow で見つけました (そのリンクが見つかりません)。コードは次のとおりです。

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
      }
        return frag;
    }

    var fragment = create('<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>'); 

    document.body.insertBefore(fragment, document.body.childNodes[0]);

このコードは問題なく動作します。ただし、生成されたコードはページの上部、bodyタグのすぐ下に表示されます。そのコードを空の中に生成したいと思いdivますid="generate-here"。

したがって、出力は次のようになります。

<div id="generate-here">
    <!-- Here is generated content -->
</div>

「ソースの表示」で生成されたコンテンツが表示されないことはわかっています。を使用して、この特定の場所でそのコンテンツを生成するだけで済み#generate-hereます。私はJavascript初心者なので、誰かがこのコードを再配置できれば完璧です。どうもありがとう！

PS Jquery でこれを行う方法は知っていますが、この場合はネイティブで純粋な JavaScript が必要です。

4

3 に答える 3

23

最後の行を変更するだけです。これにより、作成された要素が div の最後の子として追加されます。

document.getElementById("generate-here").appendChild(fragment);

これにより、作成された要素が div の最初の子として追加されます。

var generateHere = document.getElementById("generate-here");
generateHere.insertBefore(fragment, generateHere.firstChild);

innerHTML を使用して、すべてを新しいテキストに置き換えることもできます (create関数で行うように)。create明らかに、DOM オブジェクトの代わりに html 文字列が必要なため、関数を保持する必要はありません。

var generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';
于 2012-08-04T01:51:01.613 に答える
0

ステップ 1. 順序付けされた HTML リストビューを返す関数を作成しましょう。データの配列を渡していることに注意してください。

function createListView(spacecrafts){
    var listView=document.createElement('ol');
    for(var i=0;i<spacecrafts.length;i++)
    {
        var listViewItem=document.createElement('li');
        listViewItem.appendChild(document.createTextNode(spacecrafts[i]));
        listView.appendChild(listViewItem);
    }
    return listView;
}

ステップ 2.次に、リストビューを div に表示しましょう。

document.getElementById("displaySectionID").appendChild(createListView(myArr));
于 2017-08-10T05:41:17.203 に答える