We Keep Coding

How to get HTML div attribute's value from a raw HTML?

I have extracted this HTML using find().
<div class="merged_doc_list_sub_divs" div_type="pdf_doc" id="1500439">
Warwick University response
<img onclick="remove_doc_div(1500439)" src="/img/close.png" style="width:3%;float:right;cursor:initial;">
</div>
Now I want to extract id from this DIV and i tried using .attr('id') but it's giving me an error saying attr() is not a valid function, because the HTML is raw html stored in a variable.
This is what I tried
var destination_list = $('#merged_document_div').find('div.merged_doc_list_sub_divs');
if (destination_list.length > 0)
{
for (index in destination_list)
{
if (rowData['doc_id'] == destination_list.attr('id'))
{
rowData["row_exist"] = true;
}
}
}
So please let me know how do I do this?

Directly use selector to check whether element exists
var destination_list = $('#merged_document_div').find('div.merged_doc_list_sub_divs#' + rowData['doc_id']);
rowData["row_exist"] = !!destination_list.length;
However as its ID which will be unique just directly use ID selector
rowData["row_exist"] = !!$('#' + rowData['doc_id']).length;
If you are using ID to store some arbitrary data, then I would recommend you to use data-* prefixed custom attributes

HI Keyur,
Instead of using for loop, use each loop -
$.each(destination_list, function () {
if (this.id == rowData['doc_id']) {
alert("div found");
}
});

Modify innerHTML of a child div

I am new to JavaScript. What I am trying to do is make a div and inside of it there will be another div. Within my script code I am trying to create new instances of that div using factory function if that is the right name for it, and then change the innerHTML of the child div if that is possible. Thanks in advance.
<div class = "loopBlock" style="width:350px;">
<fieldset>
<legend style="color:black;font-weight:bold;">While Loop</legend>
<table>
<tr>
<td>Condition:</td>
<td><input type="text" /></td>
</tr>
</table>
<div class = "codeDivClass" id = "codeDiv">
HelloWorld!
</div>
</fieldset>
</div>
<script>
var loopDiv = document.getElementsByClassName("loopBlock");
var loopi =1;
function loopObject(){
var loopDivObject = document.createElement("div");
loopDivObject.innerHTML = loopDiv[0].innerHTML;
loopDivObject.className = "loopBlock";
loopDivObject.id = "loopBlock"+loopi;
loopi++;
return loopDivObject;
};
var functionCodeDiv = document.getElementById("codeDiv");
for (i=0; i<5; i++){
var tempLoop = loopObject();
functionCodeDiv.appendChild(tempLoop);
var id = "loopBlock"+i+1;
document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye";
}
</script>

Didn't really get how it should work, but I'm sure I've found a mistake.
var id = "loopBlock"+i+1;
you have to replace with:
var id = "loopBlock"+(i+1);
Example i is 2.
In first case you get: "loopBlock21"
In second (my) case, you'll get "loopBlock3"

The problem is in operator precedence. Since in this line
var id = "loopBlock" + i + 1;
you have two + (unary plus) operators with the same precedence they will act as a string concatenation operators, because one of the operands is a string ("loopBlock").
In your case you want to group i + 1 with parentheses to make the expression evaluate first as arithmetic addition operator. After that string concatenation with "loopBlock" will produce expected result:
var id = "loopBlock" + (i + 1);
Demo: http://jsfiddle.net/0091n9tt/

I think you're problem in is this line:
document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye";
What you are actually doing is trying to gett divs inside the newly created div (loopBlock), which is empty.
You already have a reference to the block you want to modify the innerHTML; you can simply use it like this:
tempLoop.innerHTML = "bye";
So you're for loop would look like this:
for (i=0; i<5; i++){
var tempLoop = loopObject();
functionCodeDiv.appendChild(tempLoop);
tempLoop.innerHTML = "bye";
}
Note that you don't need the id anymore.

Change a image when list box selected item is changed

I have a list box with id of 'availmap' containing filename of images the path is maps/image.jpg
I also have a image control with id of 'map' that I would like to change to the selected image using the onclick event of the list box
this is the js I have tried and can not figure out why it won't work
<script type="text/javascript">
function ChgImg() {
var list = document.getElementById('availmap');
var indx = list.selectedIndex;
var img = list[indx].value;
var id = document.getElementById('map');
id.src="maps/" + img;
}
This is the image tag and the listbox code
<div id='avail' style='position:fixed;left:500px;top:0;z-index:0;text-align:center;bgcolor='#00b0e6';>
<span style='position:fixed;left:540px;top:30px;width:250px;font-family:Arial;font-size:15px;background-color:#00b0e6;border: 1px #000000 solid;'>Availible Maps</span> </div>
<form action='jobs.php' target='joblist' style='position:fixed;left:500px;top:101px;'></td>
<select id='availmap' name='availmap' size='10' style='width: 250px;position:fixed;left:540px;top:51px;' onchange='ChgImg()'>
EOY;
while($row = mysqli_fetch_array($mapresult))
{
echo "<option value=\"".$row['ID']."\">".$row['AssocMap']."</option>\n ";
}
echo "</select>";
echo "</form>";
echo "<img id='map' src='' alt='' style='position:absolute;left:800px;top:30px;width:260px;height:185px;border: 1px #000000 solid;'>";
I'm sure it is something relatively simple I am missing here

You should use Element.setAttribute()
Adds a new attribute or changes the value of an existing attribute on
the specified element.
element.setAttribute(name, value);
Params
name is the name of the attribute as a string.
value is the desired new value of the attribute.
So, change your code to this:
function ChgImg() {
var list = document.getElementById('availmap');
var indx = list.selectedIndex;
var img = list[indx].value;
var id = document.getElementById('map');
id.setAttribute("src", img);

You're javascript was almost correct, just use id.src=img;
Complete javascript:
function ChgImg() {
var list = document.getElementById('availmap');
var indx = list.selectedIndex;
var img = list[indx].value;
var id = document.getElementById('map');
id.src=img;
}
I would use the change event instead of the click event. Don't forget to add the code in the head of the page.
UPDATE
The javascript you're using works fine as you can see in the working example. However, I don't think you're passing a valid value for the src of the image in the code you provide (value=\"".$row['ID']."\). It seems you're using the ID of the row for the value (usually a number) when you actually need to use a valid src for the image (for example http://www.w3schools.com/images/w3schools_green.jpg). Do you have the url of the images stored in some other column of the row? If so, use it instead of $row['ID']
Also, please check your HTML. There are a few mistakes that you should correct (most of them single quotes badly closed).
I've also modified your html a bit in the example

How to add text between html tags in a string client side?

After a call in a library I get the following string
var data = "<td>123.456</td>";
I'd like to insert some data (a <img /> tag) after the content of the <td></td> and get something like
<td>123.456 <img src='path' /></td>
How to properly do this in JQuery ?

You can use convert your variable in jQuery object the use append() to append img
var data = "<td>123.456</td>";
data = $(data).append("<img src='path' />").prop('outerHTML');
alert(data)
DEMO

You can append the data you want using :
$('td').append('<img src="path">');

Working Demo : JsFiddle
You can do like this :
var imagevalue = '<img src="path">';
var data = "<td>123.456 "+imagevalue+"</td>";

If you want to get the modified string in a variable
var string = '<td>123.456</td>';
//create a temp element with the contents of the given string
var $div = $('<div />', {
html: string
});
//find the td and manipulate it
$div.find('td').append('<img src="path">');
//get the modified content from the temp element
var string2 = $div.html();
console.log(string2)
Demo: Fiddle

You could use jQuery for that, but it's easier to just use string operations in plain Javascript:
var data = "<td>123.456</td>";
data = data.replace("</td>", " <img src='path' /></td>");

Check the demo http://jsfiddle.net/yeyene/xQh5J/183/
Jquery
$(document).ready(function(){
var data = "<td>123.456</td>";
$('#my_table tr').append(data);
$('#add').on('click',function(){
$('#my_table td').html($('td').text()+' <img src="http://www.softicons.com/assets/templates/softicons/images4/winlogo.png" width="16" height="16" />');
});
});

How to find if an ID is present in a variable which has HTML content

Am trying to find if the ID is present in a variable which has HTML content.
ID name is getting attached to DIV element by dynamic variables.
strHTML = "<div id='"+var1+var2+"'>"
Now, i like to check if a particular ID is present in strHTML.
How do i do that.?
Thanks in advance.
EDITED
Added actual code for more clarity...
for(data in ArrayOFObjects)
var splitDate = ArrayOFObjects[data]["NewsDate"].split("-");
**if(!$(strHTML).find('#'+splitDate[1]+splitDate[0]))** // if condition is not correct, just my try
{
strHTML += "<div id='"+splitDate[1]+splitDate[0]+"></div>"
}
}
So when the next for in loop happens, i like to check if the ID already exist in strHTML, if it exists then i do not want the DIV creation to happen
Thanks

If you want to know if your HTML contains an element whose id contains some value, you may do
var $elements = $('[id~="'+someValue+'"]', '<div>'+strHTML+'</div>');
var doContain = $elements.length>0;
If your string strHTML is really something like "<div id='"+var1+var2+"'>", then simply use a regex :
var id = strHTML.match(/["']([^\"']*)["']/)[1];
and look in id for your id.

You can use javaScript's search function:
var n=strHTML.search(var1+var2);
if (n > -1)
{
// found it!
}