Develop Reference

Appendchild to a specific id

I'm new to HTML and CSS and I hope to get some help here :D.
I want to create an <a> element at a certain div container with the id navigationPaths, which would be this div container.
<div id="navigationPaths">
This is the part of my javascript code which I want to append to this ID. This is what i already found.
var a = document.createElement('a');
var linkText = document.createTextNode("Path");
a.appendChild(linkText);
a.title = "Path";
a.href = "http://google.com";
document.body.appendChild(a);
The functions I found doesn't really suit my problem so I hope that someone here knows how this works.

As a postscript to Phil's comment, if you didn't want to faff around creating DOM elements, you could create some fully-formed HTML by inserting an HTML string into the element.
const anchor = '<a title="path" href="http://google.com">Path</a>';
const el = document.querySelector('#navigationPaths');
el.insertAdjacentHTML('beforeend', anchor);
<div id="navigationPaths">New anchor: </div>

You can just replace document.body.appendChild(a) with document.getElementById('navigationPaths').appendChild(a)

to get a specified element in javascript you can use document.getElementById('navigationPaths') or document.queryselector('#navigationPaths')
then you can save it in a variable then you can append it as a child to it like this
var a = document.createElement('a');
var linkText = document.createTextNode("Path");
a.appendChild(linkText);
a.title = "Path";
a.href = "http://google.com";
const navigation = document.getElementById('navigation');
navigation.appendChild(a);
<div id="navigation"></div>

JavaScript, move an image on another

I want to move an image on another one. I saw on forum, the best way to do this is to use destination.appendChild(elementToMove). But when I use it, my elementToMove just disappears.
Here is a fiddle for what I want to do (but that's not working):
JS Fiddle
Here is my JS Code:
var body = document.getElementsByTagName("body")[0];
var td_sign = document.getElementById("sign");
var td_moon = document.getElementById("moon");
var sign = document.createElement("img");
sign.src="http://img11.hostingpics.net/thumbs/mini_723286sign.png";
var moon = document.createElement("img");
moon.src="http://img11.hostingpics.net/thumbs/mini_418048moon.png";
td_sign.appendChild(sign);
td_moon.appendChild(moon);
var testbutton = document.createElement('input');
testbutton.type='button';
testbutton.value='test';
testbutton.onclick = function(){
sign.appendChild(moon);
}
body.appendChild(testbutton);
I just want to use JavaScript.

Creating Bootstrap Modal Dialog using JavaScript

I am trying to create a Bootstrap Modal dialog using JavaScript. The reason I am doing it with JavaScript is because I want to be able to render it later using custom elements (i.e. title, error message). I am fairly new to JavaScript so I do not understand why the code is not executed when I call the function errorMessage(). Can anyone please help out by letting me know what the mistake is and how I can correct it? Is there a more efficient way of doing it? Thank you very much.
By the way I did link the modal.js file to the HTML doc and I am aware of bootboxjs, but I don't want to use it for now.
// Creation of the alert message box.
function errorMessage() {
var Modal = document.createElement('div');
Modal.id = 'myModal';
Modal.className = 'modal fade show';
// To set up the attributes.
Modal.setAttribute("data-backdrop", "static");
Modal.setAttribute("data-keyboard", false);
document.body.appendChild(Modal);
var dialog = document.createElement('div');
dialog.className = 'modal-dialog';
Modal.appendChild(dialog);
var content = document.createElement('div');
content.className = 'modal-content';
dialog.appendChild(content);
var header = document.createElement('div');
header.className = 'modal-header';
content.appendChild(header);
var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(header);
var body = document.createElement('div');
body.className = 'modal-body';
dialog.appendChild(body);
var message = document.createElement('p');
message.createTextNode("Oh... snap. We can't find any items in your list. Please make sure your entry is structured as following:");
body.appendChild(message);
var representation = document.createElement('div');
representation.className = 'well';
body.appendChild(representation);
var representationTxt = document.createElement('p');
representationTxt.style.fontStyle = 'italic';
representationTxt.createTextNode('> Subheader , tag1 , tag2, tag3');
representation.appendChild(representationTxt);
var footer = document.createElement('div');
footer.className = 'modal-footer';
dialog.appendChild(footer);
var closeBtn = document.createElement('button');
closeBtn.setAttribute("data-dismiss", "modal");
closeBtn.setAttribute("type", "button");
closeBtn.className = 'btn btn-primary btn-inverse';
closeBtn.value = 'I got it. Thanks.';
footer.appendChild(closeBtn);
// Show modal dialog box
$("#myModal").modal('show');
}

It is failing on this line: header.appendChild(header); because it cannot append header to itself. Did you mean this?
var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(title);
A debugging tool is invaluable in javascript development (Firebug add-on for Firefox or the built-in tools in Chrome, for example). You would have seen this error right away :)

Can't create an anchor for a div tag using createElement?

For the last 20 minutes I've been befuddled by such a simple problem that it's almost embarrassing to ask. Basically I want to create an anchor tag for a div which already exists but I want to use the DOM to create the anchor. For some reason I cannot get this simple problem to work. Tried single quotes and double quotes, moving the script tag from head to body, etc...
Here's the code
<html>
<head>
</head>
<body>
<div id = "image_div">
<img src = "my_image.png" />
</div>
<script type="text/javascript">
var DIV = document.getElementById("image_div");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
DIV.appendChild(anchor);
</script>
</body>
</html>

Your Example is Working Fine.. And also Append your a Child to DOM, but You have to Insert a text and some Sign for that it is Shown to click..
var DIV = document.getElementById("image_div");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
anchor.innerText = "Click Me";
DIV.appendChild(anchor);
See Fiddle
Or If you wanna Wrap,the a Anchor tag to img then use :
var DIV = document.getElementById("image_div");
var img1 = document.getElementById("img1");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
anchor.appendChild(img1);
DIV.appendChild(anchor);
WORKING DEMO

You didn't put any text in the anchor so it won't have any size and thus you won't see it even though it's there.
var DIV = document.getElementById("image_div");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
anchor.innerHTML = "Click Me"; // <==== Add this line
DIV.appendChild(anchor);

changes not reflected in JS

I am trying to setup a new "a" component using JS function which is called , using following :
function add_div(data){
mydiv = document.getElementById("new_twt");
var link =document.createElement("a");
var text = "you have new conversations";
link.setAttribute("name",text);
link.onclick=function(){new_tweet(data);};
mydiv.appendChild(link);
}
Changes are not reflecting on the webpage , however if I use some other element such as button or new div it gets created instantly, am I missing something?

This works for me:
function add_div(data){
var mydiv = document.getElementById("new_twt");
var link = document.createElement("a");
var text = "you have new conversations";
link.name = text;
link.href = '#';
link.innerHTML = 'link';
link.onclick=function(){ new_tweet(data); return false; };
mydiv.appendChild(link);
}
I've added link text (innerHTML) so you can actually see the link
I've also added "href" so the link behaves as a link (with this you need to prevent default link action, like "return false" in the event listener, to prevent browser from jumping to the top)

Try this:
var mydiv = document.getElementById("new_twt");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm"); //or #
aTag.innerHTML = "you have new conversations";
aTag.onclick=function(){new_tweet(data);};
mydiv.appendChild(aTag);
Here is working JS Fiddle.