$('<span class="pictos">j</span>').prependTo('li');
var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
var e = document.createElement('span');
e.className = 'pictos';
e.appendChild(document.createTextNode('j'));
li[i].insertBefore(e, li[i].firstChild);
}
Working example on JSBin
What jQuery actually does is take the element and clone it for each parent it needs appending to which is a bit faster, like this:
var span = document.createElement('span');
span.className = 'pictos';
span.appendChild(document.createTextNode('j'));
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].insertBefore(span.cloneNode(true), lis[i].firstChild);
}
You can test it out here.
Related
I'm trying to for loop the H1 object through a list 10 times. I'm not sure where I went wrong any help would be appreciated.
var headOne = document.createElement("H1");
headOne.textContent = "Hello World";
document.body.appendChild(headOne);
var newOrderedList = document.createElement('OL');
newOrderedList.setAttribute("id", "OLJS");
document.body.appendChild(newOrderedList);
var helloWorld = document.getElementById("OLJS");
for (var i = 0; headOne < 10; i++){
var listItems = document.createElement("li");
listItems.innerHTML = headOne[i];
helloWorld.append(listItems);
}
If you want to loop 10 times then do:
for (let i = 0; i < 10; i++) {
// Do something
}
And in your case if you are trying to access each letter of headOne element and append it to the helloWorld list then you can do the following:
for (let i = 0; i < headOne.textContent.length; i++) {
let listItems = document.createElement('li')
listItems.textContent = headOne.textContent[i]
helloWorld.append(listItems)
}
You might also want to read more about Loops and iteration
var headOne = document.createElement("H1");
headOne.textContent = "Hello World";
document.body.appendChild(headOne);
var newOrderedList = document.createElement('OL');
newOrderedList.setAttribute("id", "OLJS");
document.body.appendChild(newOrderedList);
//var helloWorld = document.getElementById("OLJS");
for (var i = 0; i < 10; i++) {
var listItems = document.createElement("li");
listItems.innerHTML = "order list item " + (i + 1);
newOrderedList.append(listItems);
}
I have the following list hierarchy:
<ul id="ulid">
<li><a><div class="mydiv">content</div></a></li>
<li><a><div class="mydiv">content</div></a></li>
...
</ul>
I want to add some css rules to the div and this is what i've tried so far:
var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++) {
//myli[i].parentNode.style.display = "none"; // that works
var links = myli[i].getElementsByTagName("a");
for(var ii = 0; ii < links.length; ii++) {
links[ii].parentNode.style.display = "none"; // doesnt work
}
}
I can hide the li items but cant do the same for a So i cant reach the div. What am i doing wrong here?
EDIT: getElementsByClassName seems not working in greasemonkey scripts as it simply works in Emmanuel N's fiddle.
Your code seems to work. Check out this Fiddle
var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++)
{
var links = myli[i].getElementsByTagName("a");
for(var ii = 0; ii < links.length; ii++)
{
links[ii].parentNode.style.display = "none";
}
}
Your code actually does work, but I don't think it does what you're intending it to do. The last line: links[ii].parentNode.style.display = "none" will actually hide the parent node of the a tag (i.e. the li) tag, rather than the div. parentNode will go one level UP, not down.
Instead of trying to get myli[i].getElementsByTagName("a") and then working down to the div, why not myli[i].getElementsByTagName("div"), and then simply do:
var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++) {
//myli[i].parentNode.style.display = "none"; // that works
var links = myli[i].getElementsByTagName("div");
for(var ii = 0; ii < links.length; ii++) {
links[ii].style.display = "none";
}
}
Of course, there are many more efficient ways to do it. You already have classnames on the divs, so
document.getElementsByClassName("mydiv");
would work just as well.
Or, if you use jQuery, you can do the same thing without having to iterate explicitly:
$("div.mydiv").css(etc.); // style this however you want
If you aren't opposed to using jQuery, the following would hide your divs for you.
$(document).ready(function () {
var myDivs = $('div.mydiv');
for(var eachDiv in myDivs) {
$(eachDiv).hide();
}
});
How can I create new Element each time when (i) will be incremented:
for(int i = 0; i < 10; i++)
{
Element child = doc.createElement("xxx");
root.setAttribute("x", i * "xx");
doc.appendChild(child);
}
Using pure js
var div = document.getElementById("main");
for (var i = 0; i < 10; i++) {
var span = document.createElement("span");
span.setAttribute("class", "new");
span.innerHTML = "span" + i;
div.appendChild(span);
}
HTML
<div id="main"></div>
Working example.
Cheers!!
Using java
Element child = null;
for(int i = 0; i < 10; i++)
{
child = doc.createElement("xxx" + i);//you can write a method with int parameter to get element name from somewhere else
doc.appendChild(child);
}
I hope this is what you wanted, by the way for text nodes you should use doc.createTextNode("A")
I only want to remove images from a content div, not the whole site. I have tried the following:
var elements = document.getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
That removes every image.
var elements = document.getElementsById('content').document.getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
That did nothing.
Can someone tell me what I am doing wrong?
var elements = document.getElementsById('content').document.getElementsByTagName('img');
should be
var elements = document.getElementsById('content').getElementsByTagName('img');
var elements = document.getElementsById('content').getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
if using jQuery
$('#content img').hide();
Below is the javascript I have for my page:
window.onmouseover = function(){
var body = document.getElementsByTagName("body")
var h1 = document.getElementsByTagName("h1");
var a = document.getElementsByTagName("a");
var p = document.getElementsByTagName("p")
for(var j = 0; j < p.length; j++) {
body[j].style.fontFamily = "helvetica";
body[j].style.backgroundColor = "rgb(250, 250, 240)"
p[j].style.fontFamily = "courier";
a[j].onclick = function() {
this.style.backgroundColor = "Black"
}
}
}
I have one h1 element, one a element, and 10 p elements. For some reason, this code only changes the font of the first p element, although everything else works fine? Why is this and how can I fix it?
If you have only one a element and (of course) only one body you cannot iterate over 10 of them. This causes an error on the second iteration of the cycle. Use this code instead.
window.onmouseover = function(){
var body = document.getElementsByTagName("body")
var h1 = document.getElementsByTagName("h1");
var a = document.getElementsByTagName("a");
var p = document.getElementsByTagName("p")
body[0].style.fontFamily = "helvetica";
body[0].style.backgroundColor = "rgb(250, 250, 240)"
a[0].onclick = function() {
this.style.backgroundColor = "Black"
}
for (var j = 0; j < p.length; j++) {
p[j].style.fontFamily = "courier";
}
}
It may be generating an error the second time through the loop, since body[1] would be invalid. Move things around so that only manipulations on p are inside the loop.