Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So I have made a plugin for my website using javascript, one line of the code is output.innerHTML = "Test";
Can I style this using CSS or is there another way?
Can I style this using CSS
Yes. Write a selector that matches the element you have a reference to in output.
Alternatively, add new elements inside it and write selectors that match them.
or is there another way?
Not anything sane.
you can write directly like this
output.innerHTML = "<p style='your styles'>Test</p>";
If you want to style the text which is appended to the output element, then either apply a CSS class or edit the style via javascript, for example by doing the following:
output.style.color = "#FF0000";
which would produce red text.
the html
<html>
<body>
<div id="output"></div>
</body>
</html>
and javascript
window.onload = function(){
var output = document.getElementById('output');
console.log(output);
output.innerHTML = "test";
output.style.color ="#ff0000";
};
will do the work. CODEPEN
Be noted to always use window.onload or $(document).ready(function(){}) for the jQuery equivalence to make sure that the DOM element has exist by the time your javascript code is being executed.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to append the html in the DOM using innerHTML method. When </> content was inside the string html content which i want to append in DOM, It will not load in DOM. it's automatically removed.
ex:
document.getElementById("container").innerHTML = "<div></></div>";
console.log(document.getElementById("container").innerHTML);
result: "<div></div>"
I don't know why. Can anyone clarify this for me please.?
Thanks in advance.!
To print </> as text inside HTML, use the respective HTML codes.
< = < and > = >:
document.getElementById("container").innerHTML = "<div></></div>";
console.log(_.escape('</>'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<div id="container"></div>
Common libraries like underscore/lodash has _.escape method that'll do the conversion for you. See comment by #Keith below for a custom implementation.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm a javascript newbie so go easy on me. I'm wanting to select a bunch of text that is identifiable only by inline CSS (not classes or ids or anything), and create a toggle that turns it on and off. So -- find everything with backgroundColor = '#eed6b4' and toggle display='none' / 'inline-block'
Needing the javascript and html... thx
=====================
This is what I tried originally:
<script type="text/javascript">
function toggleVisibility() {
var codeNum = document.getElementsByClassName('syntaxHighlightingPlugin');
i = codeNum.length;
while(i--) {
codeNum[1].style.backgroundColor = '#eed6b4';
if(codeNum.style.display == 'inline-block')
codeNum.style.display = 'none';
else
codeNum.style.display = 'inline-block';
}
}
</script>
<button type="button" onclick="toggleVisibility();"> Hide numbers (for copying) </button>
Oh, and as I replied to a comment, the twist on this is that it's for text rendered by a TWiki plugin, so I have no control over the resulting CSS --- which, as I said, has no classes --- also, since it's rendered, I think I may need to use something like getComputedStyle (?).
It's generally bad practice to use inline css, and to make your Javascript dependant on that inline CSS is also not a good idea. However, if you wanted to select an element based on the value of an attribute, you can use the attribute value selector like this:
$("[style='backgroundColor *= #eed6b4']").hide();
Reminder: This uses jQuery.
You could set a class to that background color and then filter by class name $(".classname").
OR
You could add a new selector like explained here:
Is there a style selector in jQuery?
Not necessarily a great idea, but you could add a new Sizzle selector for it:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
which you could then use like so:
$('div:width(970)')
//That's going to be horrifically slow, though, so you'd want to narrow down on the number >of elements you're comparing with something like :
$('#navbar>div:width(970)')
//to only select those divs that are direct descendants of the navbar, which also have a >width of 970px.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am building a HTML site & that site has too many pages. So I want a code so that I can edit a particular div from my website so it will apply to all over in my website.
For eg.
In HTML >>
<div id="special-id"> I want to change or place anything [HTML code also] inside of this div with javascript </div>`*
& in javascript >>
<script type="text/javascript">
????
</script>
Please need help so that I can move to my HTML website again.
I want to change a content that may be simple text or a javascript code or HTML code?
document.getElementById('special-id').innerHTML = "Whatever you want to replace with";
The easy way:
first, get your element with e.g. getElementById, then set innerHTML to your new code.
var div = document.getElementById('special-id');
div.innerHTML = '<span>hello world</span>';
The DOM method only way:
create your new HTML nodes using document.createElement or document.createTextNode and then append them to your element with appendChild.
// assuming `div` as above
var newNode = document.createElement('span');
span.appendChild(
document.createTextNode('hello world')
);
div.appendChild(span);
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want so save states of containers in any tags of them to use it with jQuery. The problem is JS says undefined if I use data-xy and data() or attr().
What is the best way to achieve this?
Had this a lot of times. the data attribute will be lowercase, always.
Say:
<div id="hello" data-testHello="HelloThere">Test</div>
The data will still be accessed by:
$('#hello').data("testhello"); rather than "testHello".
Hope this helps.
Create an object with property as the id of div or element, and the value.
<div id="foo"><span>this is a test</span></div>
For set the state
var stateStore = {};
stateStore["foo"] = "dirty";
For access to the state
$("div").each(function(){
MakeAnythingWithIt(this);
})
function MakeAnythingWithIt(theElement)
{
var elementState = stateSore[$(theElement).attr("id")];
}
Another way is append an input type="hidden" with the state information