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
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've searched around using Google and Stack Overflow, but I haven't seemed to find a answer to this. I want to write text inside a <div> element, using JavaScript, and later clear the <div> element, and write more text into it. I am making a simple text adventure game.
This is what I am trying to do:
<DOCTYPE!HTML>
<body>
<div class="gamebox">
<!-- I want to write in this div element -->
</div>
</body>
As a new user to JavaScript, how would I be able to write inside the div element gamebox? Unfortunately, my JavaScript skills are not very good, and it would be nice if you can patiently explain what happens in the code.
You can use querySelector to get a reference to the first element matching any CSS selector. In your case, a class selector:
var div = document.querySelector(".gamebox");
querySelector works on all modern browsers, including IE8. It returns null if it didn't find any matching element. You can also get a list of all matching elements using querySelectorAll:
var list = document.querySelectorAll(".gamebox");
Then you access the elements in that list using 0-based indexes (list[0], list[1], etc.); the length of the list is available from list.length.
Then you can either assign HTML strings to innerHTML:
div.innerHTML = "This is the text, <strong>markup</strong> works too.";
...or you can use createElement or createTextNode and appendChild / insertBefore:
var child = document.createTextNode("I'm text for the div");
div.appendChild(span); // Put the text node in the div
Those functions are found in the DOM. A lot of them are now covered in the HTML5 specification as well (particularly Section 3).
Select a single element with document.querySelector or a collection with document.querySelectorAll.
And then it depends, on what you want to do:
Writing Text into the div or create an Element and append it to the div.
Like mentioned getElementsByClassName is faster. Important to know it when you use this you get returned an array with elements to reach the elment you want you specify its index line [0], [1]
var gameBox = document.getElementsByClassName('gamebox')[0];
Here how you can do it
//returns array with elements
var gameBox = document.getElementsByClassName('gamebox');
//inner HTML (overwrites fsd) this can be used if you direcly want to write in the div
gameBox[0].innerHTML ='<p>the new test</p>';
//Appending when you want to add extra content
//create new element <p>
var newP = document.createElement('p');
//create a new TextNode
var newText = document.createTextNode("i'm a new text");
//append textNode to the new element
newP.appendChild(newText);
//append to the DOM
gameBox[0].appendChild(newP);
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
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.
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