I have to generate some li element automatically and the way I was doing it it through a function that return text inside a loop, something like this:
function getLi(data) {
return '<li>' + data + '</li>';
}
then I found a better way to do it by writing html inside a div:
<div style="display:none;" id="Template">
<li id="value"></li>
</div>
and then I would change the id and value get the html and reset the element to original state:
var element = $("#value");
element.html(data);
element.attr('id', getNewId());
var htmlText = $("#Template").html();
element.html('');
element.attr('id', 'value');
return htmlText;
then I was reading on script template
and I figured this could be a better way of doing it,
However apply the previous code didn't work as the inner elements didn't exist according to this article
so how can I apply this?
EDIT:
I put inside a ul tag, I use this method to get the items dynamically
EDIT2:
<li>
<a href="#" >
<span>
<span>
some text
</span>
</span>
</li>
this isn't necessarily what I have but something along the way
Edit3:
my ul does not exist orgialy it's generated dynamically
I insist this is not a duplicate I want to know how to use a template with some dynamic variables
You could do the following way. It's clean, reusable and readable.
//A function that would return an item object
function buildItem(content, id) {
return $("<li/>", {
id: id,
html: content
});
}
In your loop, you could do the following. Do not append each LI inside the loop as DOM manipulation is costly. Hence, generate each item and stack up an object like below.
var $items = $();
// loop begin
var contents = ['<span><span>', data, '</span></span>'].join('');
var $item = buildItem(contents, getNewId());
$items.add($item);
// loop end
Just outside the loop. append those generated LIs to the desired UL, like below.
$("ul").append($items);
This is what I'd do and I am sure there are many better ways. Hope that helps.
One option is to upgrade to a modern JavaScript framework like AngularJS and then you could do it in one line using ng-repeat.
This would serve your purpose and make you more money as a developer.
If you're going to repeat this, use a templating system. Like {{ mustache }} or Handlebars.js.
If not, you can do this.
<ul>
<li class="hidden"></li>
</ul>
And in Javascript
$('ul .hidden').clone().removeClass('hidden').appendTo('ul');
And CSS, of course
.hidden { display:none }
Try this...
function getLi(data,ID) {
return $('<li id = "'+ ID + '">' + data + '</li>');
}
It returns javascript objest of Li..and you append it where ever you need.
what you need is using jquery templates, in the bellow link you can use good one which I'm using.
you create your template and prepare you JASON object of data.
after that every thing will be ready in one function call, more details in this link.
jquery.tmpl
hope this helps you and any one come to here in future..
Related
Lets say I have an empty div:
<div id='myDiv'></div>
Is this:
$('#myDiv').html("<div id='mySecondDiv'></div>");
The same as:
var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);
Whenever you pass a string of HTML to any of jQuery's methods, this is what happens:
A temporary element is created, let's call it x. x's innerHTML is set to the string of HTML that you've passed. Then jQuery will transfer each of the produced nodes (that is, x's childNodes) over to a newly created document fragment, which it will then cache for next time. It will then return the fragment's childNodes as a fresh DOM collection.
Note that it's actually a lot more complicated than that, as jQuery does a bunch of cross-browser checks and various other optimisations. E.g. if you pass just <div></div> to jQuery(), jQuery will take a shortcut and simply do document.createElement('div').
EDIT: To see the sheer quantity of checks that jQuery performs, have a look here, here and here.
innerHTML is generally the faster approach, although don't let that govern what you do all the time. jQuery's approach isn't quite as simple as element.innerHTML = ... -- as I mentioned, there are a bunch of checks and optimisations occurring.
The correct technique depends heavily on the situation. If you want to create a large number of identical elements, then the last thing you want to do is create a massive loop, creating a new jQuery object on every iteration. E.g. the quickest way to create 100 divs with jQuery:
jQuery(Array(101).join('<div></div>'));
There are also issues of readability and maintenance to take into account.
This:
$('<div id="' + someID + '" class="foobar">' + content + '</div>');
... is a lot harder to maintain than this:
$('<div/>', {
id: someID,
className: 'foobar',
html: content
});
They are not the same. The first one replaces the HTML without creating another jQuery object first. The second creates an additional jQuery wrapper for the second div, then appends it to the first.
One jQuery Wrapper (per example):
$("#myDiv").html('<div id="mySecondDiv"></div>');
$("#myDiv").append('<div id="mySecondDiv"></div>');
Two jQuery Wrappers (per example):
var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);
var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);
You have a few different use cases going on. If you want to replace the content, .html is a great call since its the equivalent of innerHTML = "...". However, if you just want to append content, the extra $() wrapper set is unneeded.
Only use two wrappers if you need to manipulate the added div later on. Even in that case, you still might only need to use one:
var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();
if by .add you mean .append, then the result is the same if #myDiv is empty.
is the performance the same? dont know.
.html(x) ends up doing the same thing as .empty().append(x)
Well, .html() uses .innerHTML which is faster than DOM creation.
.html() will replace everything.
.append() will just append at the end.
You can get the second method to achieve the same effect by:
var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);
Luca mentioned that html() just inserts hte HTML which results in faster performance.
In some occassions though, you would opt for the second option, consider:
// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");
// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);
Other than the given answers, in the case that you have something like this:
<div id="test">
<input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
var isAllowed = true;
function changed()
{
if (isAllowed)
{
var tmpHTML = $('#test').html();
tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
$('#test').html(tmpHTML);
isAllowed = false;
}
}
</script>
meaning that you want to automatically add one more file upload if any files were uploaded, the mentioned code will not work, because after the file is uploaded, the first file-upload element will be recreated and therefore the uploaded file will be wiped from it. You should use .append() instead:
function changed()
{
if (isAllowed)
{
var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
$('#test').append(tmpHTML);
isAllowed = false;
}
}
This has happened to me . Jquery version : 3.3.
If you are looping through a list of objects, and want to add each object as a child of some parent dom element, then .html and .append will behave very different. .html will end up adding only the last object to the parent element, whereas .append will add all the list objects as children of the parent element.
I'm trying to extract data from a JS function that only renders an element's HTML - and I need the element's ID or class.
Example:
JS Element Value:
x = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
I need to do get the element's id or class (in this case the id would be myId).
Is there any way to do this? Strip the tags or extract the text via strstr?
Thank you
The easiest thing to do would be to grab the jQuery object of the string you have:
$(x);
Now you have access to all the jQuery extensions on it to allow you to get/set what you need:
$(x).attr('id'); // == 'myId'
NOTE: This is obviously based on the assumption you have jQuery to use. If you don't, then the second part of my answer is - get jQuery, it's designed to make operations like these very easy and tackle compatibility issues where it can too
You may want to take a look at this:
var div = document.createElement('div');
div.innerHTML = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
console.log(div.firstChild.className);
console.log(div.firstChild.id);
Via ajax i retrieve some json data, make it as html and append it to my page.
Here I have a problem. I cant access element by id, if id is variable.
For example, http://jsfiddle.net/f8g5e/1/
<div id="123">Hello</div>
<div id="321">Bye</div>
<div id="out"></div>
$(function(){
key = '123';
$('#' + key).hide();
$('#321').hide();
});
The simples thing is works! #123 and #321 elements are hidden. Yeah, it's pretty obviosly.
But, in my project, when I append data to page:
$('#123') //returns element
$('#' + key) //returns null
Some code:
// generating data
var htmlData = '<div id="123">Greetings!</div><div id="321">Bye bye</div>';
// appending data
$('#tweets').empty();
$('#tweets').append(htmlData);
What are the possible causes i can't access elements?
Thanks.
UPDATE
Dont know how it works in JSFiddle, but when I changed my IDs to properly names it began to work now. Thanks to all! Next time, I'll take more attention to w3c dom standarts ;) Happy New Year!
The only reason I can think of that $('#'+key) wouldn't work is because the variable key is undefined.
Note: you're not supposed to start an ID with a number according to the W3C spec. However, most browsers allow it, so I doubt this is causing your problem.
However, if you have two divs with the same ID attribute, then JavaScript will only select the first one it finds -- IDs are supposed to be unique. If this is happening, use classes instead.
You can either do this:
$(function() {
$('#321,#123').hide();
});
or you can do this:
$(function() {
var key = '123';
var doit = '321';
$('#' + key + ',#' + doit).hide();
});
Basically, I have an autocomplete function to help users select an item. When they select an item, a series of variables relating to the item are saved. Once they click 'add', the variables are then injected into an HTML template, and the HTML template is injected into the DOM. My question is, how can I do this without having to mix my HTML code with the j/s code i.e. var example = "<div id='" + divId + "'></div>"; (etc.) I hope the question is clear enough.
Have you looked into jQuery Templates? It's basically client-side data binding, which seems like what you are trying to do.
For example, you can do stuff like this..
Assuming you have a list of Song objects, defined as:
var song = {
title : 'Purple Rain',
artist : 'Prince'
};
HTML:
<!-- Template definition -->
<script id="tmpl_songList" type="text/html">
<li>
<a>
<span>${title}</span>
<span>${artist}</span>
</a>
</li>
</script>
<!-- HTML container to host data-bound list -->
<ul id="song_list"></ul>
JS:
// bind data (songList) and append to HTML container.
$.tmpl($('#tmpl_songList'), songList).appendTo($('#song_list'));
You could do:
var example = $("<div />").attr("id",divId);
But when you have a lot of nested tags it can be tedious to create each element, in those cases i mix them up.
Try:
var myID = "id";
var myText = "Some Text"
$('<div/>', {
id: myID,
html: myText
}).appendTo('body');
You can add more properties, if needed.
On the other hand, if your manipulations are complex, use a template engine. It is easier to maintain.
What I need to do is be able to store some piece of data about an element.
For example, lets say I have a list item <li>, and I want to store some data about it in the element, like "This is element 1 from XYZ".
The only way I know how to do this (which I don't want to do if I can avoid) is this:
<li id='item1'>
Item 1
<!--This is element 1 from XYZ-->
</li>
<script>
// read it something like this
var e = document.getElementById('item1').innerHTML;
// then parse out the comment, etc.
// --
</script>
What I really want is something like this (which I am fairly certain is not possible):
// example
<li id='item1' userdata='This is element 1 from XYZ'>Item 1</li>
.. of course, I would like to be able to access it somehow via javasscript.
Alternatively, is there some other way to achieve this?
Thanks -
You can access your userdata="" attribute from JavaScript. Just do:
var theData = document.getElementById('item1').getAttribute('userdata');
If you want to do it the HTML5 way, then you would use attributes named data-*, e.g.:
<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>
that way it will still be valid (i.e., it'll make you feel better for not using an invalid attribute). New browsers will support accessing the data-* attributes like so:
var theData = document.getElementById('item1').data.foo;
but I don't think that is implemented widely enough to rely upon yet.
If you do want to store the data in a comment (although I'd advise going the attribute route instead) you could do something like:
var e = document.getElementById('item1');
var n = e.firstChild;
while (n && n.nodeType != Node.COMMENT_NODE) {
n = n.nextSibling;
}
// now n.nodeValue will have the comment contents
(No guarantees about whether IE likes any of the above.)
You can't add arbitrary elements to HTML. Well you can but it won't be valid and beheaviour is undefined. For this kind of thing I tend to use jQuery. It has a data() call that can add arbitrary data to an element. I believe it encodes it in the class attribute but the implementation is not important.
You could do this yourself but why bother? It's easy to get wrong by putting the wrong characters in, not correctly escaping/unescaping data or inadvertently destroying informatino. Instead just do:
$("#item1").data({source: "Thsi is element 1 from XYZ"});
Since you can accept adding comments, a better solution would be to add a span element with the content you wanted..
<span class="data">.....</span>
you define your data class to have display:none and it is invisible ...
this way you can have access to it with the normal DOM traversing methods..
You can use setUserData() and getUserData() function
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData
For example:
<html>
<head>
<script type="text/javascript">
function set(){
var a = document.getElementById("testElement");
a.setUserData("testData", "Some text", null);
}
function get(){
var a = document.getElementById("testElement");
alert(a.getUserData("testData"));
}
</script>
</head>
<body>
<span id="testElement"/>
<form>
<input type="button" value="setUserData" onclick="set()"/>
<input type="button" value="getUserData" onclick="get()"/>
</form>
</body>
If you don't need the HTML to be valid, you can make any attribute you want, and you can access it in Javascript by calling the getAttribute method.
You can add a nested invisible element with an id and your data as the innerText. Use the style attribute to make sure it's invisible.
But it all really depends on what you're trying to achieve. Could you elaborate more?
// If you want to include data in the html why not give it its own node?
.hiddendata{
display: none
}
<li id= 'item1'>
Item 1
<span class= "hiddendata"> This is element 1 from XYZ</span>
</li>
function readHiddenData(who){
var A= [], n= who.firstChild;
while(n){
if(n.className= 'hiddendata'){
A[A.length]= n.textContent || n.innerText || '';
}
n= n.nextSibling;
}
return A;
}
function showHiddenData(who){
var n= who.firstChild;
while(n){
if(n.className= 'hiddendata'){
n.style.display= "inline"
}
n= n.nextSibling;
}
}