We Keep Coding

How to add for loop inside jquery

i have array of data in mysql database, i want to display it one by one using for loop after getting the results using ajax. the process goes like this.
this is the paragraph where each items going to be rendered
when i try using for loop it says syntax error, unexpected for loop taken, how can i fix this
i.e. here i am using sample for loop in order to make things as easy as possible.
$("#manager_paymentA").html(
'<ul>'+
for(let i=0; i < 5; i++) {
'<li>Hello</li>'
}
+ '</ ul>'
)

You cannot loop inside the html function.
You should store the data into a variable:
var hello = ''
for(let i=0; i < 5; i++) {
hello += '<li>Hello</li>'
}
$("#manager_paymentA").html('<ul>'+ hello + '</ ul>')

You can use jQuery append method.
Example :
$("#manager_paymentA").append("<ul></ul>"); // Create the list
for(let i=0; i < 5; i++) {
$("#manager_paymentA > ul").append("<li>Hello</li>"); // Append elements
}

You can not put the for loop inside the html function and add it between strings.
First build the string in a string variable, and than use that variable in the html function. example:
var html = '<ul>';
for(let i=0; i < 5; i++) {
html += '<li>Hello</li>'
}
html += '</ ul>' ;
$("#manager_paymentA").html();

Just for the sake of proving that creating a string with a loop in-line CAN (somewhat) be done in Javascript:
$("#manager_paymentA").html(
'<ul>'+
(() => {
let s="";
for(let i=0; i < 5; i++) {
s += '<li>Hello</li>'
}
return s;
})()
+ '</ ul>'
)
While this works, it's not really something I would recommend doing.

//data is your array list
data.forEach(item=>
$('#manager_paymentA ul').append('<li>'+item.Name+'</li>');
)
You can access list items with the item element

Remove characters from an element while using appendChild

I'm trying to remove or replace characters in an element while using appendChild as follow:
var options = from.getElementsByTagName("option");
var to = document.getElementById("target");
to.appendChild(options[i].replace("(A)",""));
I tried various different syntax but no luck. Can someone help? Either JQuery or javascript works for me.
Thanks

I assume you're already in a for loop. If so, use the .text property of the option element, and create a new text node.
to.appendChild(document.createTextNode(options[i].text.replace("(A)","")));
Or better, in the loop append to a string, and create a single node at the end.
var txt = "":
for (var i = 0; i < options.length; ++i)
txt += options[i].text.replace("(A)"), "");
}
to.appendChild(document.createTextNode(txt));
If you actually wanted to append a copy of the element itself, then use .cloneNode(true) instead.
for (var i = 0; i < options.length; ++i) {
var clone = to.appendChild(options[i].cloneNode(true));
clone.text = clone.text.replace("(A)", "");
}

Dynamically loading multiple <li>'s with a javascript for loop - nothing loading yet

I'm trying to load X amount of <li>'s into a <ul> via a for loop in a jquery function, and while I think I've got the syntax about right I'm not getting anything loading. (no problem with loading a single <li>, but none for multiples with the method I've tried)
Initially I attempted to pass a variable into the loop to determine the amount of increments: var peekListAmount = 5;
That didn't work so I went for a bog-standard loop incrementer. That doesn't work either so, after searching here and getting close, I have put together a fiddle to see if someone can point out what I'm doing wrong: http://jsfiddle.net/janowicz/hEjxP/8/
Ultimately I want to use Knockout.js to dynamically input a number to pass to the loop amount variable, but 1st things 1st.
Many thanks in advance.

When you do:
var peekListItem = $('<li>...</li>');
you're creating a single instance of an <li> node, encapsulated in a jQuery object.
Appending an already-present node to the DOM just removes it from its current place in the DOM tree, and moves it to the new place.
You need to create the node inside the loop, not outside, otherwise you're just re-appending the same node each time, not a copy of that node.
In fact, given you're not manipulating that node, you can just put the required HTML directly inside the .append() call without wrapping it in $(...) at all:
$(function() {
var peekList = $('<ul class="peekaboo-list">').appendTo('div.peekaboo-wrap');
function addLiAnchorNodes(nodeAmount) {
var html = '<li>' +
'<p class="peekaboo-text"></p></li>';
for (var i = 0; i < nodeAmount; ++i) {
peekList.append(html);
}
}
addLiAnchorNodes(5);
});
See http://jsfiddle.net/alnitak/8xvbY/

Here is you updated code
$(function(){
var peekList = $('<ul class="peekaboo-list"></ul>');
var peekListItem = '<li><p class="peekaboo-text"></p></li>';
//var peekListAmount = 5;
var tmp = '';
var addLiAnchorNodes = function (nodeAmount){
//var nodeAmount = peekListAmount;
for (var i = 0; i < 10; i++){
tmp += peekListItem;
}
peekList.append(tmp);
$('div.peekaboo-wrap').append(peekList); // This bit works fine
}
addLiAnchorNodes();
});

This should work. Instead of appending the list item in each loop, append the list only once at the end.
$(function(){
var peekList = $('<ul class="peekaboo-list"></ul>');
peekList.appendTo('div.peekaboo-wrap');
var addLiAnchorNodes = function (nodeAmount){
var list = "";
for (var i = 0; i < 10; i++){
list += '<li>Sample<p class="peekaboo-text"></p></li>';
}
peekList.append(list);
}
addLiAnchorNodes();
});
Here is the updated fiddle

Try this:
$(function(){
var peekList = $('<ul class="peekaboo-list"></ul>');
$(peekList).appendTo('div.peekaboo-wrap'); // This bit works fine
var addLiAnchorNodes = function (nodeAmount){
//var nodeAmount = peekListAmount;
for (var i = 0; i < 10; i++){
var peekListItem = $('<li><p class="peekaboo-text"></p></li>');
peekListItem.appendTo(peekList);
}
}
addLiAnchorNodes();
});

is there a simple way to use javascript replace to remove contents inside tags

there is long string, like
<td>sdfaf</td><td width='1'></td><td width='1'>sdfdsf</td><td></td>
Is there a simple regex method to delete contents inside tags, convert it to
<td></td><td width='1'></td><td width='1'></td><td></td>
I know jquery html() and empty() can do the work, but I want to find a pure javascript method to do it.
thanks

Assuming your "string" comes from a table in your document, here's how to do it in vanilla javascript :
var cells = yourtable.getElementsByTagName('td');
for (var i=0; i<cells.length; i++) cells[i].innerHTML = '';
(if you just have the string, you may simply create a tr node and set this string as innerHTML)

try this simple code
var tds = document.getElementsByTagName("td");
for ( var counter = 0; counter < tds.length; counter++ )
{
tds[ counter ].innerHTML = "";
}

Rough and ready, assuming no angle brackets between or inside the tags:
str = str.replace( />[^<]+<\//g, '></' );

get the text of a div

I have been trying to get the text from a div using only javascript.
I started with jQuery using the following code:
var divText = $("div.Xr3").html();
Then for my JavaScript I tried:
var divText = document.getElementsByClassName("Xr3").innerHtml;
Which returns undefined. How can I accomplish this using JavaScript only?

getElementsByClassName returns a live array of HTML elements, so you can't access innerHTML directly like this. You will either have to loop over its results, or if you know there's only one, apply [0] to it before accessing innerHTML.
var divTexts = [];
var divs = document.getElementsByClassName("Xr3");
var numDivs = divs.length;
while (var i = 0; i < numDivs; i++) {
divTexts.push(divs[i].innerHtml);
}
or, in a single-element scenario,
var divText = document.getElementsByClassName("Xr3")[0].innerHtml;

If Xr3 is used one time, you can use
var divText = document.getElementsByClassName("Xr3")[0].innerHtml;