Develop Reference

Wrapping a DIV around a hyperlink created using appendChild

I have a bit of JS to add an email hyperlink to a page, after a DIV with an ID value of section_form_id:
// build email
var elmNewContentCustomer = document.createElement('a');
var elmFoo = document.getElementById('section_form_id');
elmNewContentCustomer.href = 'mailto:me#example.com?subject=Something';
elmNewContentCustomer.setAttribute("style", "color:blue;");
elmNewContentCustomer.setAttribute("id", "email_customer_id");
elmNewContentCustomer.appendChild(document.createTextNode('Email Customer'));
elmFoo.parentNode.insertBefore(elmNewContentCustomer, elmFoo.nextSibling);
This works fine. However, I'd like to put the hyperlink inside a DIV so I set the style attributes of the DIV.
I tried using this method, which was to create a DIV, and insert it before the email block using appendChild but it doesn't work:
var elmNewEmailDev = document.createElement('div');
var elmFoo2 = document.getElementById('email_customer_id');
elmNewEmailDev.setAttribute("style", "background:yellow;");
elmNewEmailDev.appendChild(elmFoo.parentNode.insertBefore(elmNewContentCustomer, elmFoo.nextSibling));
elmFoo2.parentNode.insertBefore(elmNewEmailDev, elmFoo.elmFoo2);
How can I wrap a DIV around the hyperlink so I can then use setAttribute to be able to control the style of that DIV?

Follow this method your get result as you want.
var myEmailLink = "<a href='mailto:a#b.com'>a#b.com</a>";
var myDiv = document.getElementById("section_form_id");
myDiv.insertAdjacentHTML('afterEnd', myEmailLink )
<div id="section_form_id">
My Div Here
</div>

Clicking a button to update text in JavaScript

<div id="div1"></div>
<button id="addText" onclick="addText()">Add Text</button><br>
I'm trying to have this button call this function to update a text field. I don't want it to go to an action page or anything. The display aspect isn't even important. I'm just trying to find out how to update a variable in the background with a button click.
function addText(){
// create a new div element
var newDiv = document.createElement("div");
// and give it some content
var newContent = document.createTextNode("Hi there and greetings!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}

Try this
function addText(){
document.getElementById("div1").innerHTML = "your change text";
}

JavaScript: DOM manipulation and after that a search over all elements

I'm going to load several new elements (via AJAX) into the DOM. After that I want to "refresh" the document variable to select existing and new elements.
I tried to simplify my question with this small example:
// Creating a new element and insert it into DOM
var newdiv = document.createElement('div');
newdiv.style.color = 'red';
newdiv.innerHTML = 'this is a new div container';
newdiv.classList = 'newdiv';
document.getElementById('existingdiv').appendChild(newdiv);
// Search the complete DOM for the new element and try to select it (but abc is null)
var abc = document.querySelector('newdiv');
abc.style.color = 'blue';
Any ideas (without jQuery)?

newdiv is a class not an element. To target that you have to specify dot (.) along with class name in the selector:
var abc = document.querySelector('.newdiv');

After that I want to "refresh" the document variable to select existing and new elements.
There's no need, document is live.
querySelector('newdiv') looks for an element with the tag name newdiv. You probably meant querySelector('.newdiv'), which looks for the first element with that class in the DOM.
Live Example:
// Creating a new element and insert it into DOM
var newdiv = document.createElement('div');
newdiv.style.color = 'red';
newdiv.innerHTML = 'this is a new div container';
newdiv.classList = 'newdiv';
document.getElementById('existingdiv').appendChild(newdiv);
// Search the complete DOM for the new element and try to select it (but abc is null)
var abc = document.querySelector('.newdiv');
abc.style.color = 'blue';
<div id="existingdiv"></div>

On search/highlight click -> existing div becomes wrapped with existing span

I have a problem with javascript search and highlight text.
For example, there is existing span element and existing div element.
Problem is that if I click on search button for some reason div element becomes a child of span element.
To explain it better I have created JS fiddle to show the problem:
function highlightSearch() {
$('span').removeClass('highlighted');
var text = document.getElementById('query').value;
var query = new RegExp("(\\b" + text + "\\b(?!([^<]+)?>))", "gim");
var e = document.getElementById("searchText").innerHTML;
var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, "");
document.getElementById("searchText").innerHTML = enew;
var newe = enew.replace(query, "<span class='highlighted'>$1</span>");
document.getElementById("searchText").innerHTML = newe;
}
Check problem on : JSfiddle

Well, you are removing all </span> tags from the innerHTML in this line:
var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, "");
And therefore also the </span> of .glyphicon. This is why the element becomes wrapped.
Btw: An exception is thrown: ReferenceError: highlightSearch is not defined

How to create dynamic div in javascript without using jquery?

I want to make dynamic division on button click on my web page please tell me easiest solution, I am new to JavaScript.

Hope this will help
function divcreate() {
var div = document.createElement("div");
div.setAttribute("id", "mydiv");
div.className = "mdiv";
div.style.display = "none";
document.body.appendChild(div);
}

To create an element, use the createElement method
var mydiv = document.createElement('div');
//mydiv is a variable containing a newly created div

<button onclick="createDiv()">Click Me</button>
function createDiv(){
var newDiv = document.createElement('div');
}

//create a div like below
var div=document.createElement("div");
var node=document.createTextNode("This is new.");
div.appendChild(node);
Then append the above div to which you want it to be child
var element=document.getElementById("some_parent_tag");
element.appendChild(div);