Develop Reference

javascript/jquery mutate and append html in var

I got a simple array like this:
var arr = ['string_1', 'string_2'];
And I got the following html (simplified, but original is very large):
var html = '<div><input class="myInput" type="text"></div>'
I need to append to #main_div in my DOM this html variable, but filled with values from arr, so in this case there should be 2 inputs, filled with string_1 and string_2.
I tried the following code:
$.each(arr, function(k, v){
$(html).find('.myInput').val(v);
$('#main_div').append(html);//mutated html var should be here
});
but I get 2 empty inputs. Any ideas how to fix it would be welcome. Thank you

Your logic is almost there, but the problem is that you're not storing the jQuery object that you create from the html string, so you just append the unchanged original value. Try this:
var arr = ['string_1', 'string_2'];
var html = '<div><input class="myInput" type="text"></div>'
$.each(arr, function(i, v) {
var $html = $(html).find('.myInput').val(v).end();
$('#main_div').append($html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div"></div>
Note the use of end() which returns the originally selected element (the outer div from the html string in this case) instead of the .myInput element resulting from the find() call.
Finally, you need to give the input elements name attributes to ensure they are still valid HTML.

How to check data present or not in html id

I have a HTML paragraph, if it is empty I want to show alert using jquery how.? I have tried the following:
var abc= $("#foo").text();
var abc= $("#foo").data();
var abc= $("#foo").val();
if (abc== '') { alert('working'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo"></p>

val() is used to retrieve the value of an input, not the text node value of an element. data() is used to retrieve data values for an element, not its text node value.
To check if the element does not contain anything, you should used text(). It's also worth noting that you may (or may not) need to use $.trim() to ignore whitespace, and to also check for child elements that do not have any text using children():
var $p = $('#foo'),
empty = ($.trim($p.text()) == '' && !$p.children().length);
console.log(empty);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo"></p>
Better still though, rather than rolling your own function for this, you can use jQuery's is() function, coupled with the :empty selector:
console.log( $('#foo').is(':empty') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="foo"></p>

try this :
var abc = $("#foo").text()
if(!abc) {
alert('not working');
} else {
alert('working');
}

how to put element into <div> by innerHTML or other ways?

This is my code:
var turn = 1;
var boardPiece;
var piece = [];
function init() {
boardPiece = document.getElementById("pages");
while (boardPiece.firstElementChild) {
if (typeof boardPiece.firstElementChild.id != 'undefined') {
piece.push(boardPiece.firstElementChild);
}
boardPiece.removeChild(boardPiece.firstElementChild);
}
document.getElementById("content").innerHTML = piece[0]; //My problem is here
}
init();
<div id="content">
</div>
<div id="pages">
<div id="page1" class="page">
...
</div>
<div id="page2" class="page">
...
</div>
</div>
The result is a text
[object HTMLDivElement]
not an element.
What's wrong with my .innerHTML? And what is typeof piece[0]? Is it text?

You need to replace your:
document.getElementById("content").innerHTML = piece[0];
with:
document.getElementById("content").innerHTML = piece[0].innerHTML;
What you are trying to do atm is to insert element (which is an object) as a plain text.

You need to use the .innerHTML along with your piece[0] variable like,
document.getElementById("content").innerHTML = piece[0].innerHTML;
Working Fiddle: https://jsfiddle.net/gs0yy50t/
Hope this helps!

The issue is that the type of piece[0] is not a string, but a HTML element. For that reason, in order to assign it to the content's innerHTML (which is a string), JavaScript is implicitly calling the piece[0].toString() method.
When calling the toString() method in HTML nodes (like most non-string objects in JavaScript), it returns a string representing the type of the object.
If you need to add the element piece[0] as child of content, then you should do:
document.getElementById("content").innerHTML = piece[0].outerHTML;
However, if what you need is to copy the content of one element into another, you should use the property innerHTML instead:
document.getElementById("content").innerHTML = piece[0].innerHTML;
Basically, both properties are strings with the HTML code of the element but outerHTML includes the element itself in the root.

Replacing html entities with a text using javascript

Please I want to replace html entities with a text like so: <img src='my_image.jpg'> so I ran this code:
var image = $("#my_div").html($("#my_div").html().replace(/<img scr='(.*?)'>/g, "{{$1}}"));
so when its outputted it show like this: {{my_image.jpg}} but when outputted this is what displays: [object Object]. Please I need help because I know am getting something wrong.

You can change an img element's attribute (src in this case) like this :
Markup:
<img id="eximg" src="source.jpg">
Script:
$('#eximg').attr('src','anothersource.jpg');

You can use a function to create the new value
<img id="myid" src="mypicture.jpg">
<script>
$('#myid').attr('src', function(i, origValue){
return "{{" + origValue + "}}";
});
</script>

Select element from Jquery post return

I am trying to select an element from jquery post returning data. String is returning but when I try to select an element from returning html string, selection is always null. This is a userscript which is being loaded with greasemonkey.
refresh();
function refresh(___id,___action,___page){
$.post("http://www.example.com", {auction_id:___id,action:___action,page:___page}, function(bidpage){
var auction_id = $("#auction_id", bidpage).val();
console.log(auction_id);
});
This post returns this data
<html><head></head><body><input type="hidden" name="auction_id" id="auction_id" value="8583949"></body></html>
But auction_id is always null. Cant find any solution to that. Thank you for your helps.

This is because you get bidpage as string. You need to convert it to HTML first:
var auction_id = $("#auction_id", $( bidpage ) ).val();
As by jQuery API [context] should be DOM Element, Document, or jQuery.
COMMENT:
Seems like jQuery strips <html> and <body> elements so you need to use:
var auction_id = $( bidpage ).val();

you could try adding your post data to a div:
<div id="appendpostdatahere"></div>
function refresh(___id,___action,___page){
$.post("http://www.example.com", {auction_id:___id,action:___action,page:___page},
function(bidpage){
$('#appendpostdatahere').html(bidpage);
var auction_id = $('#auction_id).val();
console.log(auction_id);
});
}