जावास्क्रिप्ट का उपयोग करके मैं div कैसे बना सकता हूं और शैली बना सकता हूं?

115

मैं सामग्री के साथ एक div बनाने और शैली (और पृष्ठ में संलग्न) बनाने के लिए जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं? मुझे पता है कि यह संभव है, लेकिन कैसे?जावास्क्रिप्ट का उपयोग करके मैं 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>

document.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);

उपयोग माता पिता संदर्भ।

स्रोत

2011-07-27 06:41:17

इस समाधान jQuery पुस्तकालय आप यह कैसे कर रहे हैं पर

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

स्रोत

2011-07-27 06:43:41 banners

मजेदार दिखने वाला जावास्क्रिप्ट। – 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 id = "hello"; 
var classAttr = "class"; 
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';

शरीर के लिए संलग्न करने के लिए:

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

आप विशेषता चाहता था और/या विशेषता मान तो चर के आधार पर किया:

स्रोत

2011-07-27 06:45:32 jrharshath

मैं नहीं कहूंगा कि jQuery आसान है, यह ज्यादातर छोटा है। लेकिन, कक्षा के लिए setAttribute का उपयोग करने के बजाय, मैं div.className = 'myclass' का उपयोग करूंगा; एक बार जब आप भारी जावास्क्रिप्ट यूआई विकसित करना शुरू करते हैं तो –

jQuery बहुत आसान है। यह देखते हुए कि यह प्रोग्रामिंग के कार्यात्मक मॉडल को गले से गले लगाता है, यह आपके कोड को दिखता है और साथ ही कार्य करता है। मामले में मामला: देशी जेएस बनाम jquery का उपयोग कर AJAX :) – jrharshath

jQuery "कार्यात्मक" कॉलिंग एक प्रमुख खिंचाव है। आप कार्यात्मक मॉडल को कैसे परिभाषित करते हैं, और आपको लगता है कि jQuery आपको किस तरह से गले लगाता है? –

यहाँ एक समाधान है कि मैं का उपयोग करेंगे :

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

पाई के रूप में आसान।

स्रोत

2015-10-08 00:43:06 Peter

मुझे HTML पृष्ठ पर क्या लिखना चाहिए? –

शीर्ष भाग एचटीएमएल है ... – Peter

जबकि अन्य उत्तर यहां काम करते हैं, मुझे लगता है कि आपने सामग्री के साथ एक div के लिए कहा था। तो यहां अतिरिक्त सामग्री के साथ मेरा संस्करण है। नीचे जेएसफ़ील्ड लिंक।

जावास्क्रिप्ट(टिप्पणी के साथ) :

// 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; }

नोट: सीएसएस लाइनों

JSFiddle Ratal Tomal से उधार लिया: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

जावास्क्रिप्ट का उपयोग करके मैं div कैसे बना सकता हूं और शैली बना सकता हूं?

उत्तर

संबंधित मुद्दे