İçeriğe sahip bir div oluşturmak ve stil oluşturmak (ve sayfaya eklemek) için JavaScript'i nasıl kullanabilirim? Bunun mümkün olduğunu biliyorum, ama nasıl?
Yanıtlar:
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);Bunun yerine üst referans kullanın document.body.
Bunu nasıl yaptığınıza bağlı. Saf javascript:
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);Aynı şeyi jquery kullanarak yapmak utanç verici derecede kolaydır:
$('body')
.append('my DOM manupulation skills dont seem like a big deal when using jquery')
.css('color', 'red').addClass('myclass');Şerefe!
divsoruyu cevaplamıyor
Buradaki diğer yanıtlar çalışırken, içerikli bir div istediğini fark ettim. İşte ekstra içeriğe sahip sürümüm. Alttaki JSFiddle bağlantısı.
JavaScript (yorumlarla birlikte):
// 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; }Not: Ratal Tomal'dan ödünç alınan CSS hatları
İşte kullanacağım bir çözüm:
var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';Özellik ve / veya özellik değerlerinin değişkenleri temel almasını istiyorsanız:
var id = "hello";
var classAttr = "class";
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';Sonra, vücuda eklemek için:
document.getElementsByTagName("body").innerHTML = div;Pasta kadar kolay.
[0]Kullanırken belirtmemiz gerekiyor getElementsByTagName(). (Düzenleme için çok kısa)
Böyle yaratabilirsiniz
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
document.getElementById("main").appendChild(board);Çalıştırılabilir Snippet'i Tamamla:
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>id adıyla div oluştur
var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}div'e metin ekle
var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}test kodu
divCreator("div1");
textAdder("div1", "this is paragraph 1");çıktı
this is paragraph 1Yapmak istediğim başka bir şey, bir nesne oluşturmak ve daha sonra nesneyi döngüye sokmak ve stilleri ayarlamaktır çünkü her bir stili tek tek yazmak sıkıcı olabilir.
var bookStyles = {
color: "red",
backgroundColor: "blue",
height: "300px",
width: "200px"
};
let div = document.createElement("div");
for (let style in bookStyles) {
div.style[style] = bookStyles[style];
}
body.appendChild(div);