Is there a way to apply a CSS style within Javascript?
Say I have a CSS style titled "InfoFont" and I want to apply it to the text written from document.write("Information");, how would I do this?
You would need to wrap the content you are adding dynamically with a tag containing the desired CSS class.
Are you really adding content via document.write though?
It would be more common to see something like this:
var newDiv = document.createElement( "div" );
newDiv.className = "InfoFont";
newDiv.innerHTML = "[YOUR CONTENT HERE]";
document.getElementById( "[RELEVANT CONTAINER ID]" ).appendChild( newDiv );
You need a document element like a span or a div to encapsulate your text. Then, you can apply a style to the encapsulating element.
As the comment mentioned, you should be avoiding document.write. I recommend you use jquery or another framework to manipulate the DOM if you have access to them.
Try this way:-
var ele = document.createElement('div');
ele.setAttribute('id', 'ELEMENTID');
ele.setAttribute('className', 'InfoFont'); // OR ele.className = 'InfoFont';
ele.innerHTML = "CONTENT";
#Matt's comment answer is the simply best answer.
Related
My code follows:
g = document.createElement('div');
g.setAttribute("id", "divcontainer");
g.innerHTML = `
HTML GOES HERE
`
When I use this on a site, I want the div centered and visible, it is working in the fact that it creates the div (tested that in console) but I cannot see it.
I am not using JQuery but if I need to, I can. My goal is to have a UI type thing.
Your code only creates the element but doesn't add it to the DOM, in order to do that you have to use document.body.appendChild(element) and that will add the element to the body element, you can also use the same method to add the element inside and element that you select by id or by QuerySelector.
You can modify your code as follows :
g = document.createElement('div');
g.setAttribute("id", "divcontainer");
g.innerHTML = `HTML GOES HERE`;
document.body.appendChild(g);
If you want to add multiple elements you can use append() instead of appendChild().
document.body.append(g,g2,g3,g4)
Hope that helps!
I need a simple and pure javascript script that toggle a custom tag (like <mytag>some text</my tag>) in a contenteditable div. Any ideas?
You cannot outright replace an element's tag with JavaScript.
However, you can create an element on the fly, and set the contents of that element to be the original element.
This can be seen in the following:
var e = document.getElementsByClassName('editable')[0];
e.onclick = function() {
var d = document.createElement('textarea');
d.innerHTML = e.innerHTML;
e.parentNode.replaceChild(d, e);
}
<div class="editable">Text</div>
As for toggling it, you'd need to set the element back to a <div>.
Hope this helps! :)
I have this code which creates an element but the problem i am facing is it appends it at the very bottom of the page, in order for this to work i need it to be positioned in a certain place in the DOM how can i do this ?
var x = document.getElementById('options_10528_1');
var pos = document.getElementById('options-10528-list');
x.onclick = function(){
var elem = document.createElement('div');
elem.setAttribute("class","uk-warning");
elem.innerHTML = "Unfortunately, we cannot supply this medicine. Please consult your GP.";
document.body.appendChild(elem);
}
afterWhichNode.parentNode.insertBefore(newNode, afterWhichNode.nextSibling);
This code will insert a node after the afterwichNode, thats using vanilla javascript, if you are using jquery, just use .after()
Currently you are appending the element in the body tag, it will always goes at bottom. So if you want to append the element in a specific position, you have to append it in that container. let say you want to append it in "pos", you can do this:
pos.appendChild(elem);
It is a script in javascript that add a <div></div> and add an id, a class, html.. I want to add name attribut too and my code doesn't works, but I wonder why..
There https://developer.mozilla.org/fr/DOM/element I have seen that element.name = 'newname'; can edit it..
function newgroup() {
var e = document.getElementsByName('group');
var nb = e.length + 1
div = document.createElement("div");
div.id = 'group'+nb;
div.className = 'panel_drop';
div.name = '1';
div.innerHTML = '<h5>Group '+nb+'</h5>';
div.innerHTML += '<div class=\'drop_zone\'></div>';
document.getElementById('groups').appendChild(div);
}
The name attribute of an HTML element is not mapped to the name property of the corresponding DOM element for all elements, but only for certain types of elements, and DIV elements are not one of them.
You can check for which types of HTML elements the name attribute is specified here: http://www.whatwg.org/specs/web-apps/current-work/multipage//section-index.html#attributes-1
Since the HTML standard doesn't specify a name attribute for DIV elements, my recommendation is to not use such an attribute/property on DIV elements. If you need to attach additional information to your DIV elements, consider data-* attributes.
div.setAttribute('name', '1');
The fact that div.getAttribute('class') is also exported as a convenience function as the className property (with an impilicit setter and getter) doesn't mean that it is a consistent way to handle DOM node property names.
BTW, consider using a javascript framework, like jQuery, Prototype, MooTools or YUI, helps on the long run...
For example with Jquery you can have easily a finer control on attributes by changing them or removing them
IE does not allow writing to the innerHTML property of style or head elements. So how do you copy a style element from the head of one document to another?
function copy_style(src_style_tag) {
var tmp_div = document.createElement('div');
var innerHTML = src_style_tag.innerHTML;
tmp_div.innerHTML = '<p>x</p><style type="text/css">' + innerHTML + '</style>';
return tmp_div.getElementsByTagName('style')[0];
}
The magic is that you need the <p> tag in the innerHTML of the tmp_div. Without it, IE does not accept the style element.
If you want to copy some elements, than try using Node.cloneNode(true) together with Node.appendChild