JavaScriptを使用してdivを作成してスタイルを設定するにはどうすればよいですか？

115

divをコンテンツと共に作成したり、スタイルを設定したり（ページに追加するために）JavaScriptを使用するにはどうすればよいですか？私はそれが可能だと知っていますが、どうですか？JavaScriptを使用してdivを作成してスタイルを設定するにはどうすればよいですか？

出典

2011-07-27 Anonymous

も参照してください。http://stackoverflow.com/questions/5927012/javascript-createelement-style-problem –

190

var div = document.createElement("div"); 
 
div.style.width = "100px"; 
 
div.style.height = "100px"; 
 
div.style.background = "red"; 
 
div.style.color = "white"; 
 
div.innerHTML = "Hello"; 
 

 
document.getElementById("main").appendChild(div);

<body> 
 
<div id="main"></div> 
 
</body>

var div = document.createElement("div"); 
div.style.width = "100px"; 
div.style.height = "100px"; 
div.style.background = "red"; 
div.style.color = "white"; 
div.innerHTML = "Hello"; 

document.getElementById("main").appendChild(div); 
OR 
document.body.appendChild(div);

使用親参照の代わりに、document.body。

出典

2011-07-27 06:41:17

このソリューションは、jQueryライブラリを使用しています

$('#elementId').append("<div class='classname'>content</div>");

出典

2011-07-27 06:43:41 banners

面白い探しているJavascript。 – TheCarver

は、あなたがそれをやっている方法によって異なります。ピュアジャバスクリプト：

var div = document.createElement('div'); 
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>"; 
// set style 
div.style.color = 'red'; 
// better to use CSS though - just set class 
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css 
document.body.appendChild(div);

jqueryのを使用して同じことを行うには、あきれるほど簡単です：

$('body') 
.append('my DOM manupulation skills dont seem like a big deal when using jquery') 
.css('color', 'red').addClass('myclass');

乾杯！あなたが属性を望んでいた、および/または属性値が変数に基づいてされる場合

var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';

：ここ

出典

2011-07-27 06:45:32 jrharshath

私はjQueryが簡単だとは言わないでしょうが、それはほんのわずかです。しかし、クラスにsetAttributeを使用する代わりに、div.className = 'myclass'を使用します。 –

jQueryは、重いJavascriptのUIを開発し始めた方が簡単です。それがプログラミングの機能モデルを取り入れていることを考えると、コードを見せて機能的にも動作します。場合のケース：ajaxを使用してネイティブjs対jquery :) – jrharshath

jQueryを呼び出す "機能"は大きなストレッチです。どのように機能モデルを定義し、どのようにjQueryがそれを採用していると思いますか？ –

は、私が使用したい一つの解決策だ

var id = "hello"; 
var classAttr = "class"; 
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';

その後、体に追加します：

document.getElementsByTagName("body").innerHTML = div;

パイは簡単です。

出典

2015-10-08 00:43:06 Peter

私はHTMLページに書く必要がありますか？ –

上部はHTMLです... – Peter

他の回答は機能していますが、内容のあるdivを要求しています。だからここに余分な内容の私のバージョンです。下のJSFiddleリンク。（コメント付き）

はJavaScript：

// Creating a div element 
var divElement = document.createElement("Div"); 
divElement.id = "divID"; 

// Styling it 
divElement.style.textAlign = "center"; 
divElement.style.fontWeight = "bold"; 
divElement.style.fontSize = "smaller"; 
divElement.style.paddingTop = "15px"; 

// Adding a paragraph to it 
var paragraph = document.createElement("P"); 
var text = document.createTextNode("Another paragraph, yay! This one will be styled different from the rest since we styled the DIV we specifically created."); 
paragraph.appendChild(text); 
divElement.appendChild(paragraph); 

// Adding a button, cause why not! 
var button = document.createElement("Button"); 
var textForButton = document.createTextNode("Release the alert"); 
button.appendChild(textForButton); 
button.addEventListener("click", function(){ 
    alert("Hi!"); 
}); 
divElement.appendChild(button); 

// Appending the div element to body 
document.getElementsByTagName("body")[0].appendChild(divElement);

HTML：

<body> 
    <h1>Title</h1> 
    <p>This is a paragraph. Well, kind of.</p> 
</body>

CSS：

h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; } 

p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }

注：

JSFiddle Ratal Tomalから借りCSSライン：https://jsfiddle.net/Rani_Kheir/erL7aowz/

出典

2016-05-01 07:01:09

あなたはこの

board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;" 

document.getElementById("main").appendChild(board);

コンプリートRunnableをスニペットのように作成することができます。

var board; 
 
board= document.createElement("div"); 
 
board.id = "mainBoard"; 
 
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;" 
 
    
 
document.getElementById("main").appendChild(board);

<body> 
 
<div id="main"></div> 
 
</body>

出典

2016-10-03 12:31:45

JavaScriptを使用してdivを作成してスタイルを設定するにはどうすればよいですか？

答えて

関連する問題