I have a code already written in javascript:
var objTo = document.getElementById('krishna')
var href1 = document.createElement("div");
href1.setAttribute("style","float: left");
objTo.appendChild(href1);
Already so many elements are appended to href1 in javascript.
I want to add some more elements to href1 using jquery
I tried href1.append("<br>");
it says href1.append is not a function
How to use jquery append to append an element to href1.
You need to turn the native element into a jQuery object. Native elements don't recognize jQuery methods
Try
$(href1).append("<br>");
If you want to do all this with jQuery alone the code is quite simple
// create new <div> element and apply style
var href1 = $("<div>").css('float','left');
// append to id=krishna
$('#krishna').append(href1);
Related
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
Hi I want to add fade in effect , to a chrome plugin which shows up using appendChild().
I want something like,
document.body.appendChild(div).fadeIn(1000);
Is their a way to do so ?
the fadeIn() method is provided by jQuery - Assuming div is a dom element reference, you need to get the jQuery wrapper for it and then call fadeIn
var div = document.createElement('div');
...
document.body.appendChild(div);
$(div).hide().fadeIn(1000);
it can even be written as
var div = document.createElement('div');
...
$(div).hide().appendTo(document.body).fadeIn(1000);
fadeIn() is a jQuery method, not a DOM method so you need to call it on a jQuery object, not a DOM object. In addition, you probably want to hide the element before appending it like this:
// assumes you already have an element to append in a variable named div
div.style.display = "none";
document.body.appendChild(div);
$(div).fadeIn(1000);
Or, using more jQuery, it could be like this:
$(div).hide().appendTo(document.body).fadeIn(1000);
Please try use this code
$('<div class="someelement"/>').appendTo('body');
$('.someelement').fadeIn();
Perhaps there's a better way to word my question by saying "Dynamically create DOM elements via Javascript", but I decided to write the simple title in case the latter was wrong. Anyway, is there a way I can "spawn" HTML elements via Javascript? For example, I can click a button on my site, and a paragraph will appear?
You can use createElement() like this:
var el = docment.createElement("elementtype");
This will create any element, if you replace elementtype with the type of element ("div", "p", etc.)
After that, you can use the native .appendChild() or .insertBefore() methods on whichever element you want to attach this new created element onto.
var attachTo = document.getElementById('appendToMe');
attachTo.appendChild(el);
And it'll be on the page after the last element inside of that element.
References:
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore
var element = document.createElement('p');
element.innerHTML = "Hey, this is a new paragraph!";
parentElement.appendChild(element);
For more information, refer to document.createElement and Node.appendChild
I am writing a simple accordion with just javascript.
I need to place an element before another element in the DOM. I know that I can do this with jQuery's insertBefore, but I am unfamiliar with how to do it using just JavaScript.
Any help is appreciated.
The native APIs have an .insertBefore method. You pass it the element you'd like to insert, and the element you want it inserted in front of.
// Create a new textNode, get reference to container
var foo = document.createTextNode("Foo"),
div = document.getElementById("foo");
// Insert new textNode before container's firstChild
div.insertBefore(foo, div.firstChild);
Fiddle: http://jsfiddle.net/jonathansampson/rn5pa/
Use insertBefore():
var el = document.getElementById('elementID'),
newElement = document.createElement('div');
el.parentNode.insertBefore(newElement, el);
Reference:
Node.insertBefore().
You can use insertBefore method
Is there any way to add classes or alter objects that is dynamically added to the body?
I am adding a range of objects to the body by javascript.
Fot instance Im adding some links that is dynamically generated and added to the body. When they are loaded I need to elect the first of the divs and add a new class to it.
I can't seem to find any way to do this... Update the DOM or how should I go around this? There must be a way to alter dynamically added objects.
Any clues?
Thanks for any help!
if you added them dynamically, then you can just use the objects you already have. Otherwise you'll need to find them with sizzle.
//create the elements
var $link1 = $('<a>click me</a>').attr('href','page1.html');
var $link2 = $('<a>click me</a>').attr('href','page2.html');
//append the elements
$('#some-links').append($link1).append($link2);
//use the element we created
$link1.addClass('my-class');
//find the second link element using sizzle
$('#some-links>a').eq(1).addClass('my-other-class');
demo: http://jsfiddle.net/PtebM/2/
Well of course you caN:
var a = $('<a>');
a.html('new link').appendTo('#menu');
a.addClass('border');
or
var a = $('<a>');
a.html('new link').appendTo('#menu');
$('#menu a').addClass('border');
fiddle http://jsfiddle.net/4NPqH/
Why not just add a class name to your generated elements?.
I.e.:
$('span').html('Hello world').addClass("fancyText").appendTo('body');