मैं सामग्री के साथ एक div बनाने और शैली (और पृष्ठ पर संलग्न) के लिए जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं? मुझे पता है कि यह संभव है, लेकिन कैसे?
जवाबों:
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।
निर्भर करता है कि आप इसे कैसे कर रहे हैं। शुद्ध जावास्क्रिप्ट:
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');चीयर्स!
divइसलिए इस सवाल का जवाब नहीं है
जबकि अन्य उत्तर यहां काम करते हैं, मैंने देखा कि आपने सामग्री के साथ एक डिव के लिए कहा था। तो यहाँ अतिरिक्त सामग्री के साथ मेरा संस्करण है। सबसे नीचे JSFiddle लिंक।
जावास्क्रिप्ट (टिप्पणियों के साथ):
// 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>सीएसएस:
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; }नोट: Ratal Tomal से उधार ली गई CSS लाइनें
यहाँ एक समाधान है जिसका मैं उपयोग करूंगा:
var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';यदि आप चर के आधार पर विशेषता और / या विशेषता मान चाहते थे:
var id = "hello";
var classAttr = "class";
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';फिर, शरीर को जोड़ने के लिए:
document.getElementsByTagName("body").innerHTML = div;बहुत आसान।
[0]उपयोग करते समय हमें निर्दिष्ट करना होगा getElementsByTagName()। (एक संपादन के लिए बहुत कम)
आप इस तरह बना सकते हैं
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
document.getElementById("main").appendChild(board);पूरा चलने योग्य स्निपेट:
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>आईडी नाम के साथ div बनाएँ
var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}div में पाठ जोड़ें
var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}परीक्षण कोड
divCreator("div1");
textAdder("div1", "this is paragraph 1");उत्पादन
this is paragraph 1एक और चीज जो मुझे करना पसंद है, वह है एक वस्तु बनाना और फिर वस्तु को लूप करना और उस तरह की शैलियों को स्थापित करना क्योंकि यह एक-एक करके हर एक शैली को थकाऊ लिख सकती है।
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);