Develop Reference

How to write the HTML code for the inline element showing an image for use in webpage?

I'm writing my first code in an interactive/follow-along program through Cengage (MindTap). The program is instructing me to "write the HTML code for the inline element showing the sky image to use in the webpage." I am supposed to create a variable named imgStr that stores this text string:
<img src='sd_skyMap.png' />
Where Map is the value of the mapNum variable (there are 23 files titled sd_sky0, sd_sky1, sd_sky3 and so fourth). It says to use the + operator to combine text strings together and to include single-quote characters within the text strings.
I cannot get the sky images to appear on the webpage to save my life.
I've attempted going through a tutor provided through my university but have still have no luck getting the image to display.
var imgStr = "<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 +
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 +
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />";
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
Having inserted the code into jshint.com, it stated one warning and one unused variable.
(Bad assignment.)
document.getElementById("planisphere").insertAdjacentHTML() = imgStr;
and mapNum is an unused variable.

InsertAdjacentHTML takes two strings as parameters.
The first parameter is the position which takes one of four static values.
The second parameter is your HTML string to be inserted.
An example for what you want could be:
document.getElementById("planisphere").insertAdjacentHTML('afterbegin', imgStr);

You were nearly there, just append beforeend using the document.insertAdjacentHTML()
const imgStr = `<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 +
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 +
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />`;
document.getElementById("planisphere").insertAdjacentHTML('beforeend', imgStr);
<div id = "planisphere">
</div>

There are two problems on your code, the first is you need to run trough the different image files and add each one separately. On the code you provided, all image's names are being combined as one.
The second problem is your use of the insertAdjacentHTML() function. The function expects as arguments the position of the new tag and the tag itself, none is being passed. Check here for a better explanation.
Assuming you have n images that you want to add as n tags, you can try something like this:
// variable to hold the total number of images used
var numberOfImages = 23;
// we loop trough all images, where i will count from 0 to numberOfImages
for (var i = 0; i < numberOfImages; i++) {
// on each step of the loop we add a new img tag with sd_skyi as source
document.getElementById("planisphere")
.insertAdjacentHTML('afterend', "<img src='sd_sky" + i + ".png' />")
}
If you use this exerpt as is, it will add 23 img tags to an element with id planisphere.

unable to create textnode using jQuery without default namespace

I am trying to create text node in xml using jQuery.
Below is the code which create text node in xml, but it is creating textnode with default namespace.
function CheckChildNodeExistance(bindName, $xml) {
$xmlNode = $xml.find(bindName);
if ($xmlNode.length <= 0) {
debugger;
var bName = bindName.split(' ');
//$xml.find(bName[0] + ' ' + bName[1]).append('<' + bName[2] + '></' + bName[2] + '>');
//var str1 = $xml.createTextNode(bName[2]); //this line gives me error
//$xml.append(str1);
$xml.append($('<' + bName[2] + '></' + bName[2] + '>'));
}
}
$xml is my jQuery xml object.
Output of this method create xml element with default namespace.
if you closely look into address node, it has default namespace which is causing the problem. I want to remove this namespace.
<address xmlns="http://www.w3.org/1999/xhtml" />
Can anybody help me on this
<row><CardCode>ABCDEFGH</CardCode><Name>HO</Name><Position>1</Position><Phone1>1</Phone1><Phone2>1</Phone2><MobilePhone>1</MobilePhone><Fax>1</Fax><E_Mail>1</E_Mail><Pager>1</Pager><Remarks1>1</Remarks1><Remarks2>1</Remarks2><InternalCode>1307</InternalCode><Gender>gt_Undefined</Gender><Active>tYES</Active><FirstName>Manish</FirstName><MiddleName>S</MiddleName><LastName>Chourasia</LastName><address xmlns="http://www.w3.org/1999/xhtml" /></row>

Javascript search XML by Tag and get the sibling nodes

I am new to javascript and xml and am having an issue searching for a value in an xml file and displaying the related node values. I have notepad and IE 8 to work with and was trying to follow search xml file for any occurrence in search string. I was able to cobble together something that worked could not get the code given to work; but, it just brings back the tag I searched using getElementsByTagName.
I am working with an xml that is being generated by someone else and I have no control over the xml so for each, I do not even know what to call them, I want to call them a recordset, ?node family? it might not have all the fields.
Example: books-> title, author, year and price
while another one will be
Example: books-> title, author, year
So I would like to search by title and bring back the related fields. Am looking to see if this is possible using the tools I have available, no jsquery, Ajax, XPath....
I checked w3 schools http://www.w3schools.com/dom/prop_element_firstchild.asp and it has I think what I need but can not get the search function(from the stack overflow link) to work.
Have tried to add the latest code I was working with; but, my brain is dead and cannot not seem to get it to display nicely.
XML = "test.xml"
<?xml version="1.0" encoding="UTF-8" ?>
<dataroot>
<XML_x0020_Export>
<ID>142450</ID>
<LI>B</LI>
<FI>G</FI>
<Status>Available</Status>
<Status-Date>2014-11-14T00:00:00</Status-Date>
<Status-Loc>Web</Status-Loc>
</XML_x0020_Export>
<XML_x0020_Export>
<ID>144230</ID>
<LI>F</LI>
<FI>T</FI>
<Status>Available</Status>
<Status-Date>2014-11-14T00:00:00</Status-Date>
<Status-Loc>In House</Status-Loc>
</XML_x0020_Export>
<XML_x0020_Export>
<ID>144240</ID>
<LI>F</LI>
<FI>P</FI>
<Status>NA</Status>
</XML_x0020_Export>
</dataroot>
HTML = "new_test.htm"
<!DOCTYPE html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script type="text/javascript">
var xmlDoc;
function loadxml()
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = readXML;
xmlDoc.load("test.xml");
}
function readXML()
{
if(xmlDoc.readyState == 4)
{
var foundElements = [];
arrayOfElements = xmlDoc.getElementsByTagName("XML_x0020_Export");
for (i=0;i<arrayOfElements.length;i++)
{
if (arrayOfElements[i].ID == 144230)
{
foundElements.push(arrayOfElements[i]);
document.write("<br>" + "Match Found: " + i);
document.write("<br>");
}
for (i=0;i<arrayOfElements.length;i++)
{
document.write("<br>");
document.write("Not Found: " + i + "|nodeName: " + " " + arrayOfElements[i].nodeName + "|nodeValue: " + arrayOfElements[i].nodeValue);
document.write("<br>" + "Parent Node = " + arrayOfElements[1].parentNode.nodeName);
}
}
}
}
</script>
</head>
<body onload="loadxml();">
</body>
</html>
I am hoping to get something so I can write to the html:
ID = 144230; LI = F; FI = T; Status = Available; Status-Date =
2014-11-14T00:00:00; Status-Loc = In House
but if I search by "144240" it would just write:
ID = 144240; LI = F; FI = P; Status = NA
But right now all I get is:
Not Found: 0|nodeName: XML_x0020_Export|nodeValue: null
Parent Node = dataroot
Not Found: 1|nodeName: XML_x0020_Export|nodeValue: null
Parent Node = dataroot
Not Found: 2|nodeName: XML_x0020_Export|nodeValue: null
Parent Node = dataroot

Ok, I have fixed several things in this. First, you wouldn't ever really be trying to load an xml file locally... You would get the xml file from a web service or something along those lines, and then you would operate on it. This has been answered many times on stack overflow and I have removed it from the complexity of your situation. So I have converted your xml file to a string, using new lines to concatenate it.
Second, I think I should just walk through the lines of code, explaining as we go.
var foundElements = [];
arrayOfElements = xmlDoc.getElementsByTagName("XML_x0020_Export");
This did not change, we instantiate our array and load it with our xml elements.
for (i=0;i<arrayOfElements.length;i++)
This starts a loop. We want to loop through the starting index of the array (0), go until we hit the length of the array, and increment our counter by 1 on every iteration.
var output = "";
This is us instantiating our output string for each element.
for (x=0; x<arrayOfElements[i].childNodes.length; x++) {
This starts a second loop within our loop. We want to iterate over the XML Nodes in each xml element of our previous loop. We use arrayOfElements[i].childNodes to return all child nodes (ID, Status, Etc). Then once again we want to start at the starting index of our our array (0), we want to go until we've reached the end of our child nodes.
if (arrayOfElements[i].childNodes[x].nodeType == 1) {
We only want to operate on nodes that have a nodeType of 1. These are our attribute nodes, and contain the data we really care about.
output += arrayOfElements[i].childNodes[x].nodeName + ": " + arrayOfElements[i].childNodes[x].firstChild.nodeValue + "\n";
Then we concatenate our string with the child nodes name (title) and value (value).
document.write(output);
document.write("<br>");
Once we hit the last node in our element, we want to write to the html, and loop through to our next element.
This all works for me, and it should help give you an idea of how to navigate xml documents. One thing that it seems you are not using is Javascript's built in debugging. I am not certain how complex javascript programming would be possible without this, and it was crucial in my writing this response to you.
https://developer.chrome.com/devtools/docs/javascript-debugging
Final Code:
<!DOCTYPE html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script type="text/javascript">
var xmlDoc;
function loadxml()
{
parser=new DOMParser();
xmlDoc=parser.parseFromString( "<dataroot> \n" +
"<XML_x0020_Export> \n" +
"<ID>142450</ID> \n" +
"<LI>B</LI> \n" +
"<FI>G</FI> \n" +
"<Status>Available</Status> \n" +
"<Status-Date>2014-11-14T00:00:00</Status-Date> \n" +
"<Status-Loc>Web</Status-Loc> \n" +
"</XML_x0020_Export> \n" +
"<XML_x0020_Export> \n" +
"<ID>144230</ID> \n" +
"<LI>F</LI> \n" +
"<FI>T</FI> \n" +
"<Status>Available</Status> \n" +
"<Status-Date>2014-11-14T00:00:00</Status-Date> \n" +
"<Status-Loc>In House</Status-Loc> \n" +
"</XML_x0020_Export> \n" +
"<XML_x0020_Export> \n" +
"<ID>144240</ID> \n" +
"<LI>F</LI> \n" +
"<FI>P</FI> \n" +
"<Status>NA</Status> \n" +
"</XML_x0020_Export> \n" +
"</dataroot>",
"text/xml");
}
function readXML()
{
var foundElements = [];
arrayOfElements = xmlDoc.getElementsByTagName("XML_x0020_Export");
for (i=0;i<arrayOfElements.length;i++)
{
var output = "";
for (x=0; x<arrayOfElements[i].childNodes.length; x++) {
if (arrayOfElements[i].childNodes[x].nodeType == 1) {
output += arrayOfElements[i].childNodes[x].nodeName + ": " + arrayOfElements[i].childNodes[x].firstChild.nodeValue + "\n";
}
}
document.write(output);
document.write("<br>");
}
}
</script>
</head>
<body onload="loadxml(); readXML()">
</body>
</html>

attempting to split string dynamically keep getting error?

I'm attempting to split a string I'm passing into
$("#groupUL").append("<li>" + "<h2>About Item:</h2> " + response.data[i].message + "<br /> " + "<h2>Posted By:</h2> <a href='#' onclick='splitName('" + response.data[i].from.name + "');'>" + response.data[i].from.name + "</a>" + "<br />");
Seems to be passing me the error
SyntaxError: syntax error
splitName(
Not sure how that's wrong...Here is the splitname function if that helps
function splitName(txt){
var myString = txt;
var mySplitResult = myString.split(" ");
console.log("The first element is " + mySplitResult[0]);
console.log("<br /> The second element is " + mySplitResult[1]);
console.log("<br /> The third element is " + mySplitResult[2]);
};

It's too hard to get it right when you put quotes in quotes in quotes and you try to escape it right. You got it wrong.
A solution is to make it in small parts :
var action = "splitName('" + response.data[i].from.name + "');";
$("#groupUL").append("<li>" + "<h2>About ... onclick=\""+action+"\">...");
But the best solution would be to follow best practice, that is not inline the javascript but use jQuery's binding function :
$("#groupUL").append("... <a id=myid ...");
$("#myid").click(function(){ splitName(response.data[i].from.name) });

I think the only problem with your code is with your readability issue. So I would suggest please improve it. Lets have a look at it. My code example # JSbin.
Here is the code :- (which i think is better)
var response = {
data : {
message: 'Cleaning code',
from: {
name: 'Clean Code works'
}
}
};
var li = $('<li>'); //Create empty li (Not Appending to DOM now due to performance issues)
$('<h2>').html('About Item:' + response.data.message + '<br />').appendTo(li);
$('<h2>').html('Posted By:').appendTo(li);
$('<a>').attr('href', '#')
.html(response.data.from.name)
.appendTo(li)
.click(function() {
splitName(response.data.from.name);
});
$('<br>').appendTo(li);
// Append li to ul (Final operation to DOM)
li.appendTo('#groupUL');
function splitName(txt){
var myString = txt;
var mySplitResult = myString.split(" ");
console.log("The first element is " + mySplitResult[0]);
console.log("The second element is " + mySplitResult[1]);
console.log("The third element is " + mySplitResult[2]);
}

javascript insert text in specific place in text area

I write a form that inserts some xml tags into textarea. I use this function:
(function ($) {
addCustomTag = function (name, param, value) {
var code = "<" + name + " " + param + "=\"" + value + "\">\n</" + name + ">";
document.getElementById("codeArea").value += code;
};
})(jQuery);
How can I make that some other function will insert subtags into tags that were created before?
XML code will never be used on server. All I need is to insert tex in specific line which is depends on what was on this line before not cutting it. Something like this:
addCustomSubtag = function(name,param,value,parent) {
document.getElementById("codeArea").selectionStart = document.getElementById("codeArea").value - parent.length;
var code = "<" + name + " " + param + "=\"" + value + "\">\n</" + name + ">";
document.getElementById("codeArea").value += code;
};
Javascript isn't necessary. It also can be written on jQuery.
Thanks.

You can any of these jQuery functions
http://api.jquery.com/append/
http://api.jquery.com/appendTo/
http://api.jquery.com/prepend/
Update:
Actually we can use jQuery DOM manipulation methods to manipulate XML also.
var xml = "<main/>";
alert(xml); // <main/>
var $xml = $(xml).append($("<sub1/>"));
alert($xml.html()); // <sub1></sub1>
$xml.find("sub1").append($("<sub2/>"));
alert($xml.html()); // <sub1><sub2></sub2></sub1>
alert($xml.get(0).outerHTML); // <main><sub1><sub2></sub2></sub1></main>