I have this JavaScript code that does createElement, but how can I style it from my separate CSS file?
JavaScript
emails.forEach(function(email) {
const element = document.createElement('div');
element.innerHTML = email.sender + ' ' + email.subject + ' ' + email.timestamp
document.querySelector('#email-container').append(element);
});
HTML
<div id="email-container">
</div>
CSS
#email-container .element{
border-width:2px;
border-style:solid;
border-color:black;
}
if you're styling it that way, then you expect the div to have class element. So you just need one extra line to add that class to the element. Full code here:
emails.forEach(function(email) {
const element = document.createElement('div');
element.classList.add('element');
element.innerHTML = email.sender + ' ' + email.subject + ' ' + email.timestamp
document.querySelector('#email-container').append(element);
});
Related
guys I need to add a class for div inside of a javascript function. I wanna put a box every agency_name, ADRESS_TEXT and phone How can I do this
function jsFilt(value) {
document.getElementById("myDiv").innerHTML = "";
value.AGENCY.forEach(agency => {
$("#myDiv").append(
//HERE "<div class ="xxx" style='border-style:ridge' ><strong>Agency Name :</strong> " + agency.agency_name + "<br>" +
"<strong>Adress : </strong> " + agency.ADRESS_TEXT + "<br> "+
"<strong>Phone :</strong> " + agency.phone + "<br></div>"
);
});
}
CSS
.xxx{
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
}
As others said there is two ways: .addClass('classname1 classname2') and .attr('class','classname1 classname2') but addClass is better
in your case will be like:
function jsFilt(value) {
console.log('running jsFilt');
//document.getElementById("myDiv").innerHTML = "";
$('#myDiv').html(''); // this is jquery way of doing it
console.log('myDiv is now empty');
value.AGENCY.forEach(agency => {
console.log('inside loop');
//first we create that div and give it class and style
const $div = $('<div></div>').addClass('xxx').attr('style','border-style:ridge;');
// here we set innerHTML
$div.html(`
<strong>Agency Name :</strong> ` + agency.agency_name + `<br>
<strong>Adress : </strong> ` + agency.ADRESS_TEXT + `<br>
<strong>Phone :</strong> ` + agency.phone + `<br>
`);
console.log('here is the div we created:',$div);
// here we append it to the container (#myDiv)
$("#myDiv").append($div);
console.log('this is how myDiv looks like now', $("#myDiv"));
});
}
make sure you call the function of course jsFilt(someValue)
I put some console.log('bla bla') in my codes if you open browser console you can see some messages being printed out and it helps you track issue. after everything worked you can remove console.log()s
So this may work or may have some syntax errors. Let me know if you could get it to work
You can addClass to the div after the append like:
function jsFilt(value) {
document.getElementById("myDiv").innerHTML = "";
value.AGENCY.forEach(agency => {
$("#myDiv").append(
"<strong>Adress : </strong> " + agency.ADRESS_TEXT + "<br> "+
"<strong>Phone :</strong> " + agency.phone + "<br></div>"
).addClass("CLASSNAME1 CLASSNAME2");
});
}
I want to give some css value to my one of the element from the below code.
_strInnerHtml += "<h3>"+ p_strDay + "-" + dictCalendarmonth[p_strMonth] + "-" + p_strYear + "</h3>" + "<h4>" + value.cati_tithi_name + "</h4>";
I want to show the <h3> & h4 in the same line. How can I put the css there?
_strInnerHtml += "<h3 style = "color:blue">"+ p_strDay + "-" + dictCalendarmonth[p_strMonth] + "-" + p_strYear + "</h3>" + "<h4>" + value.cati_tithi_name + "</h4>";
This way its not working..
Either escape double quotes or put single quote for css color property.
But the best solution will be adding specific CSS class
Don't process the elements as String. Use document.createElement() to create new element (any HTML DOM element). Then you can set style easily. Like:
var h3= document.createElement('h3');
h3.style.property= 'value';
See more:
HTML DOM createElement()
Changing CSS using JS
And create a parent div to keep h3 and h4 elements.
you should add CSS class like
.heading{
//css property
}
and add into JavaScript
_strInnerHtml += "<h3 class = 'heading'>"+ p_strDay + "-" + dictCalendarmonth[p_strMonth] + "-" + p_strYear + "</h3>" + "<h4>" + value.cati_tithi_name + "</h4>";
if you want to show both h3 and h4 in a same line
add this CSS class in both
.half{
width: 50%;
float: left;
}
I am trying to find and append some text in a dynamically created parent div
but its not working.
Here is what I have tried.
var mainDiv = "" +
"<div>" +
"<div></div>" +
"<div>" +
"<div class='image-here'></div>" +
"</div>" +
"</div>"; // proper script is in Fiddle
var imageDiv = $(mainDiv).children(".image-here");
$(imageDiv).html("text allocated");
$(mainDiv).dialog();
Here is the Fiddle: http://jsfiddle.net/xBB5x/10166/
Change this:
var imageDiv = $(mainDiv).children(".image-here");
$(imageDiv).html("text allocated");
$(mainDiv).dialog()
to this:
$(mainDiv).dialog().find(".image-here").html("text allocated");
Here is the JSFiddle demo
The script works, creates everything correctly, etc., but the jquery addClass method isn't adding the class. I'm new to using jquery methods in a javascript function, any help is appreciated, including alternate methods for adding the appropriate classes without using jquery.
function thumbnail(Img, Element, Modal, ModalTitle) {
"use strict";
/*jslint browser:true*/
/*global $, jQuery*/
//this function will append an anchor tag with the appropriate functionality, accepting inputs on the image filename, attaching element, and modal
//Img = full filename in format of foo.png
//Element = the ID of the element within which the thumbnail anchor will be placed
//Modal = the ID of the modal
//ModalTitle = Text used for title of the modal and title of the caption
var image, element, modal, loc, output, iUrl, modal_loc, modal_output, mtitle;
image = Img;
element = Element;
modal = Modal;
mtitle = ModalTitle;
iUrl = "/design-library/images/thumbs/" + image;
output = "<a href='#' data-reveal-id='" + modal + "'>";
output += "<img class='sample_img' src='" + iUrl + "' alt='" + mtitle + "' />";
output += "</a>";
output += "<p class='caption'>" + mtitle + "</p>";
modal_output = "<h1>" + mtitle + "</h1>";
modal_output += "<img src='" + iUrl + "' alt='" + image + "' /><a class='close-reveal-modal'>×</a>";
//create the modal container
$(modal).addClass('reveal-modal');
modal_loc = document.getElementById(modal);
modal_loc.innerHTML = modal_output;
//the end of the script gets the element and adds the anchor tag that exists in output
$(element).addClass('samples');
loc = document.getElementById(element);
loc.innerHTML = output;
}
Since modal and element are IDs, you should correct your selectors to use them as ones:
$('#' + modal).addClass('reveal-modal');
$('#' + element).addClass('samples');
Side note. Once you have found the DOM element with jQuery, there is no need to perform the second search with getElementById:
var modal_loc = $('#' + modal);
modal_loc.addClass('reveal-modal');
modal_loc.html(modal_output);
if modal is an ID string, you need to do:
$('#'+modal).addClass('reveal-modal');
Try changing:
$(element).addClass('samples');
to
$('#' + element).addClass('samples');
I have the following code:
$("#stats-list")
.append("<li>Elapsed: " + ajaxElapsed + "</li>\n" +
"<li>Display: " + tableElapsed + "</li>\n" +
"<li>Total: " + (ajaxElapsed + tableElapsed) + "</li>");
This was originally three appends that I concatenated into one. Is there anything I could do with jQuery that would clean up this code even more. What I was wondering was if jQuery has any string formatting with tokens that I could use.
function format(formatString) {
var args = Array.prototype.slice.call(arguments,1);
return formatString.replace(/\{(\d+)\}/g, function(match, num) {
return args[Number(num)];
});
}
format("<li>Elapsed: {0}</li>\n<li>Display: {1}</li>\n<li>Total: {2}</li>",
ajaxElapsed, tableElapsed, ajaxElapsed + tableElapsed);
afaik there is none built-in, but a powerful templating-subsystem, see jQuery Templates
just for completeness, i think this could be done more elegant:
var list = $('#stats-list');
$('<li />').text('Elapsed: ' + ajaxElapsed).appendTo(list);
$('<li />').text('Display: ' + tableElapsed).appendTo(list);
$('<li />').text('Total: ' + (ajaxElapsed + tableElapsed)).appendTo(list);
If you have many items you can do something like this to avoid missing + and writing li so many times. You can add any number of items inside the array and they will be joined with lis appropriately.
var list = '<li>' + [
'Elapsed: ' + ajaxElapsed,
'Display: ' + tableElapsed,
'Total: ' + ajaxElapsed + tableElapsed
].join('</li><li>') + '</li>';
$("#stats-list").append(list);
As a note I wouldn't use \n. li is a block element by default, so you'd be better styling it with css.