3

ウェブサイトのコンテンツを自動的に生成するために、javascript でいくつかの基本的なことをしようとしていますが、それは私を夢中にさせます!!! 誰かがJavaScriptを取得してdivに新しい画像と段落を作成する方法の簡単な例を教えてください..私のウェブサイトの構造がこのようなものだとしましょう...

<html>
<head>
</head>

<body>
<div id ="wrapper">
<div id ="content">
</div>
</div>
</body>
</html

ページの読み込み時と画像のクリック時に、javascript関数を使用して「コンテンツ」divに画像とパラグラフを作成するにはどうすればよいですか。私はそれがDOMに関係していることを知っていますが、私はこれに何時間も取り組んできましたが、それを機能させることができません! それがどのように行われたかの例を見せてください。よろしくお願いします!!!!!!!!

4

1 に答える 1

5

最も単純な形式では:

// gets a reference to the div of id="content":
var div = document.getElementById('content'),
    // creates a new img element:
    img = document.createElement('img'),
    // creates a new p element:
    p = document.createElement('p'),
    // creates a new text-node:
    text = document.createTextNode('some text in the newly created text-node.');

// sets the src attribute of the newly-created image element:
img.src = 'http://lorempixel.com/400/200/people';

// appends the text-node to the newly-created p element:
p.appendChild(text);

// appends the newly-created image to the div (that we found above):
div.appendChild(img);
// appends the newly-created p element to the same div:
div.appendChild(p);

JS フィドルのデモ。

参考文献:

于 2012-06-02T20:56:59.623 に答える