I need to display the value in html page using dom jQuery, but its does not display the value. My code:
$(document.createElement("li"))
.append(
$(document.createElement("span"))
.attr({
id: id,
name: name,
value: name
})
)
.addClass('firstli')
)}
span element doesn't have value property, you should use text instead.
var $li = $('<li/>');
$('<span/>', {
id: layer.id,
name: layer.name,
text: layer.name,
'class': 'bullet'
}).appendTo($li)
Try:
$("<li></li>").append(
$("<span></span>").attr({
id: layer.id,
name: layer.name,
}).text(layer.name)
).addClass('bullet').appendTo(document);
And may be you want to append it to document
With your above code you just have created the elements, you still need to add them to the DOM, you have several methods for that, for example you could use .appendTo() to append your elements at the end of some other existent element in the DOM, so your following line:
).addClass('bullet')
would be changed for this one:
).addClass('bullet').appendTo('#someDOMelement');
Related
var htmlComponent = [
{
element : 'button',
text : "Addition"
},
{
element : 'h1',
text : "This is the heading"
},
{
element : 'p',
text : "This is the paragraph."
}
];
htmlComponent.forEach(function(item) {
// Problem here
document.body.appendChild(document.createElement(item.element).appendChild(document.createTextNode(item.text)));
}
Actually I wanted to create an html element using DOM Object but this is not working. I mean my code is not working properly..
but when I changed something Like that:
htmlComponent.forEach(function(item) {
var _element = document.createElement(item.element);
var text = document.createTextNode(item.text);
_element.appendChild(text);
document.body.appendChild(_element);
}
Then the code is working.
Here the main question is why 2nd code is working and the 1st one is not working...... what is the problem in my code.
please Explain me........
You are chaining the calls together like body.createElement().appendChild() where you shouldn't.
This works with createElement() because it returns the element you want to append to, but it doesn't work with appendChild() because that returns the child you just appended, which you are then appending again to the body.
This programming style is known as a "fluent" interface. It is supported by some libraries e.g. jQuery, but not by native Javascript DOM functions.
See https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
Try as follows
appendChild does not return parent
var htmlComponent = [{
element: 'button',
text: "Addition"
},
{
element: 'h1',
text: "This is the heading"
},
{
element: 'p',
text: "This is the paragraph."
}
];
htmlComponent.forEach(function(element) {
var btn = document.createElement(element.element);
var t = document.createTextNode(element.text);
btn.appendChild(t);
document.body.appendChild(btn);
});
According to the documentation for appendChild:
The returned value is the appended child except when the given child
is a DocumentFragment, in which case the empty DocumentFragment is
returned.
You are appending a text node to the button, then trying to append the returned result to the body. This is the reason why you are not seeing the button being appended to the body.
If you break it down like this, it's easier to see what's going on:
document.body.appendChild(
// createElement returns button
document.createElement("button")
// button.appendChild then returns the appended child (a text node)
.appendChild(document.createTextNode("text"))
)
My question is related more to why is this happening, not to knowing how to solve it.
I want to firstly append a <li> to a div and then an <a> to the <li>.
I have the following jQuery code:
$('.patches').empty();
for(i=0;i<patches.length;i++){
$('.patches').append($('<li>', {
id:'li'+ patches[i].name,
class: 'list-group-item'
}));
$('#li'+patches[i].name).append($('<a>',{
href:patches[i].downloadUrl,
text:patches[i].name,
id:'a'+patches[i].name
}));
$('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}
The <li> is appended but the <a> isn't, why isn't this working?
EDIT: I have modified the code as follows and it works perfectly:
$('.patches').empty();
for(i=0;i<patches.length;i++){
var listItem=$('<li>', {
id:'li'+ patches[i].name,
class: 'list-group-item'
});
$('.patches').append(listItem);
var aItem=$('<a>',{
href:patches[i].downloadUrl,
text:patches[i].name,
id:'a'+patches[i].name
});
listItem.append(aItem);
listItem.append('<p>Version : '+patches[i].version+' Author : '+patches[i].author+'</p>');
}
This version is almost the same as the previous one, I am just using variables. I would still like to know why the previous version of the code was not working. Could someone explain this?
You are querying DOM before even appending to the DOM.
Append to li directly
for(i=0;i<patches.length;i++){
$('.patches').append($('<li>', {
id:'li'+ patches[i].name,
class: 'list-group-item'
}).append($('<a>',{
href:patches[i].downloadUrl,
text:patches[i].name,
id:'a'+patches[i].name
})));
$('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}
You can create a link element and wrap it in a li tag, then append it to the list.
See following please:
$(document).ready(function(){
let patches = [
{name: "test1", downloadUrl: "/url1", version: 1, author: "Alessandro"},
{name: "test2", downloadUrl: "/url2", version: 2, author: "Alessandro"}];
$('.patches').empty();
for(i=0;i<patches.length;i++){
let link = $('<a>',{
href:patches[i].downloadUrl,
text: 'Version : '+patches[i].version+' Author : '+patches[i].author,
id:'a'+patches[i].name
}).wrap("<li></li>").parent();
$('.patches').append($(link, {
id:'li'+ patches[i].name,
class: 'list-group-item'
}));
}
});
$("#btnAdd").click(function(){
$("#atest2").append(";\tSome new information");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAdd">Add something to second element</button>
<ol class="patches"/>
If you want to refer to a specific link element you could use its id, like:
$("#atest2").append(";\tSome new information");
I hope it helps you, bye.
These elements are dynamically created. So, you need to call something like this
$(document).on('event', '.class-name', function(){
// code
});
Modify your logic to first add <a> tag to the <li>, and then add that <li> tag to the <div>...
Understanding Setting JQuery Variables
Recently I was introduced to setting a JQuery variable as seen below via assistance I was looking for on another question I had on StackOverflow. You can create an input field via simply calling upon a variable and it also appears that the anchor variable defines styles too!
var clicked = $('.clicked');
var ul = clicked.children('ul');
var input = $('<input />', {
type: 'text',
class: 'rename',
value: 'New Folder',
focusout: function() {
$(this).siblings('a').html($(this).val()).show();
$(this).remove();
$(anchor).parent().removeClass('clicked');
}
});
var anchor = $('<a>', {
href: '#',
css: {
display: 'none'
}
});
ul.prepend($('<li>').append([input.select(), anchor]));
I believe I understand how to modify and recreate the above snippet, the only aspect I don't actually understand is the setting of the styles. Upon my research, I haven't yet found anything alike this method and I'm hoping I can find more of an understanding via posting a question.
My aim is to understand and use more frequently with my next target being to create a select option field with all the options calling for .selectBoxIt() at the end.
UPDATE
I'm not entirely sure if this is the best way to achieve this however I've come up with a solution thanks to answers to as how to create a select option list;
var select = $('<select />');
var options = [
{val : 1, text: '3 DAYS'},
{val : 2, text: '10 DAYS'},
{val : 3, text: '30 DAYS'},
{val : 4, text: '60 DAYS'}
];
$('.hello').prepend(select);
$(options).each(function() {
select.append($("<option>").attr('value',this.val).text(this.text));
});
// Because we are appending at a later date
// for the .selectBoxIt(); to work...
$(".hello select").selectBoxIt();
You can start here http://api.jquery.com/jquery/ and scroll down to the section on creating new elements.
As of jQuery 1.4, the second argument to jQuery() can accept a plain
object consisting of a superset of the properties that can be passed
to the .attr() method.
I know this may look like a repost, but I am not able to get the code to work that the community made here.
What I am trying to do is make an array of all the classes listed in the element I am clicking on.
The element I am clicking on is a <g></g> element from a SVG object.
I would like to post the classes (in an array) to a modal and the ID of the <g> element. Here is my code:
//reveal Modal when when clicking on an item box.
$(document).ready(function() {
$('.items').click(function() {
$.ajax({
type: "POST",
url: "/includes/functions/choose_item.php",
data: { id: this.id, class: this.className}
})
.done(function() {
$('#choose_item_modal').foundation('reveal', 'open', "/includes/functions/choose_item.php") ;
})
});
});
It post it to my PHP script, and the ID works, but the class is in an array of baseval and animval, and I would like an array of all values of the baseval only.
This is the array I get:
Array ( [animVal] => items hero_item [baseVal] => items hero_item )
Thanks for any help.
SVG elements doesn't really have classes like regular elements, and the className property returns a special object, usually a SVGAnimatedString looking like
{animVal: "class class2", baseVal: "class class2"}
The class attribute is really just a regular attribute with some strangeness, so you need to use getAttribute('class') instead, or in jQuery attr() to get the value of the attribute
$(document).ready(function() {
$('.items').click(function() {
$.ajax({
type : "POST",
url : "/includes/functions/choose_item.php",
data : {
id : this.id,
'class' : $(this).attr('class')
}
}).done(function() {
$('#choose_item_modal').foundation('reveal', 'open', "/includes/functions/choose_item.php") ;
});
});
});
note that class is a keyword in javascript, so it should be quoted.
If you need an array, you can do $(this).attr('class').split(/\s+/);
TEST
This may be a simple answer, but I'm trying to add a dom-created element (i.e. document.createElement(...)) to a jQuery Selector.
jQuery has a great assortment of functions for adding html
.html(htmlString)
.append(htmlString)
.prepend(htmlString)
But what i want to do is add a dom OBJECT
var myFancyDiv = document.createElement("div");
myFancyDiv.setAttribute("id", "FancyDiv");
// This is the theoretical function im looking for.
$("#SomeOtherDiv").htmlDom(myFancyDiv);
Try this:
$("#SomeOtherDiv").append($(myFancyDiv));
Wrapping the DOM element in $(...), I'd expect you could add it with any of the jQuery DOM manipulation functions that take a jQuery element collection.
This should do it !
$("#SomeOtherDiv").append('<div id="FancyDiv"></div>'));
You could make things simpler and faster by cutting out jQuery entirely for something this simple:
document.getElementById("SomeOtherDiv").appendChild(fancyDiv);
This will work in jQuery 1.4
$("<div/>",{
id: 'FancyDiv'
}).appendTo("#SomeOtherDiv");
http://api.jquery.com/jQuery/#jQuery2
You can try this way:
$("<div/>", {
// PROPERTIES HERE
text: "Click me",
id: "example",
"class": "myDiv", // ('class' is still better in quotes)
css: {
color: "red",
fontSize: "3em",
cursor: "pointer"
},
on: {
mouseenter: function() {
console.log("PLEASE... "+ $(this).text());
},
click: function() {
console.log("Hy! My ID is: "+ this.id);
}
},
append: "<i>!!</i>",
appendTo: "body" // Finally, append to any selector
});